Vue v-if v-for v-bind v-on-低调大师

Vue v-if v-for v-bind v-on

2018-01-06 705

v-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})

v-bind

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">

v-on

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

案例整合

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <title>关注的人</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link href="../css/qsc-user.css" rel="stylesheet" type="text/css">
    <link href="../css/ddd-dialog.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .cont {
            margin-top: 5em!important;
        }


        .tu img {
            display: block;
            width: 50%;
            margin: 10px auto;
        }

        body {
            background-color: #fff;
            font-family: "微软雅黑";
        }

        .aui-bar-nav {

            background: #00d8c9;
        }

        .color_organ{
            color: #ff901a;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn ">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">关注的人</div>
</header>
<div id="content" class="aui-content aui-margin-b-15" v-cloak>
    <div v-if="Items.length == 0">
        <div class="cont">
            <div class="tu">
                <img src="../image/nodata5.png">
            </div>
        </div>
    </div>
    <div v-else>
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item aui-list-item-middle" v-for="Item in Items">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img v-bind:src="Item.Avatar" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14" v-cloak>{{Item.Nickname}}
   
                        </div>
                    </div>
                    <div class="aui-list-item-text">
                        我直播，我快乐
                    </div>
                </div>
                <div class="aui-list-item-right aui-margin-r-15">
                    <input type="checkbox" class="aui-radio" checked v-on:click="follow(Item.RongCustomerId,$event)">
                </div>
            </div>
        </li>
    </ul>
    </div>
</div>


<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>

<script>
    var user;
    apiready = function () {
        user = $api.getStorage('user');
        fix_status_bar();
        // 获取账户数据
        api.ajax({
            url : BASE_URL_ACTION + '/RongCloud/GetSubscriptionList',
            method : 'post',
            data : {
                values : {
                    rongCustomerId : user.person_id,
                    subscribe: 0,
                    pageIndex:0,
                    pageSize:20
                }
            }
        },function(json, err) {
            var header_vm = new Vue({
                el: '#content',
                data: json,
                methods:{
                    follow:function (RongCustomerId,e) {
                        var target = e.currentTarget;
                        if ($(target).is(":checked")) {// 关注
                            follow(RongCustomerId,user.person_id,1);
                        } else  { // 取消关注
                            follow(RongCustomerId,user.person_id,0);
                        }

                        // 发送页面刷新事件
                        api.sendEvent({
                            name: 'diamond_reload',
                            extra: {
                            }
                        });
                    }
                }
            })
        });

    }

    // 关注主播
    function follow(roomId,rongCustomerId,subscribe) { // subscribe 1关注 0取消关注
        api.ajax({
            url : BASE_URL_ACTION + '/RongCloud/ChatRoomSubscribe',
            method : 'post',
            data : {
                values : {
                    roomId:roomId, // 主播的融云id
                    rongCustomerId : rongCustomerId,
                    subscribe:subscribe
                }
            }
        }, function(json, err) {
        });
    }
</script>

</body>

</html>本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6698551.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/337043

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

html2canvas截取页面

1.下载html2canvas.js 2.引入 3.修改html2canvas支持远程图片处理 function ImageContainer(src, cors) { this.src = src; this.image = new Image(); var self = this; this.tainted = null; this.promise = new Promise(function(resolve, reject) { self.image.onload = resolve; self.image.onerror = reject; if (cors) { //self.image.crossOrigin = "anonymous";//1.去掉此处的anonymous代码改为空 self.image.crossOrigin = ""; } //self.image.src = src;//2.在源src后面添加一个随机数如时间戳+"?"+new Date().getTime(); self.image.src = src+"?"+new Date().getTime(...

2018-01-06

625

1.src <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = function () { var vm = new Vue({ el: '#box', data: { url:'../img/1.png', w100:'100px', title:"这是图片" } }); } </script> </head> <body> <div id="box"> <img v-bind:src="url" v-bind:width="w100" v-bind:title="title"> <img :src="url" :width="w...

2018-01-06

558

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。