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>

Vue v-if v-for v-bind v-on的更多相关文章

  1. SIP模块版本错误问题：the sip module implements API v??? but XXX module requires API v???

    系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...

  2. n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关

    如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...

  3. vue中使用elementUI中表格的v宽度，字体大小

    <el-table :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style=&q ...

  4. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  5. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

  6. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

  7. XVI Open Cup named after E.V. Pankratiev. GP of Peterhof

    A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...

  8. XVI Open Cup named after E.V. Pankratiev. GP of Siberia

    A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...

  9. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg

    A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

    A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...

随机推荐

  1. ARM嵌入式复习

    第一章 1.嵌入式系统 “以应用为中心,以计算机技术为基础,软硬件可裁剪,适用于应用系统对功能,可靠性,成本,体积,功耗要求严格的专用计算机系统” 根据应用的要求,沿着“体积小,低功耗,高可靠”方向发 ...

  2. 安卓开发--HttpDemo01

    package com.cnn.httpdemo01; import android.app.Activity; import android.content.Intent; import andro ...

  3. 点击鼠标右键弹出错误提示：CrashHandler initialization error

    电脑重装系统后,什么都没有了,重装部分必须用的软件后,不管是在桌面还是在文件夹中,当点击鼠标右键时,总是弹出错误,如下图所示: 上网找解决方法,也没有找到,但是看错误,是与SVN有关. 产生原因:To ...

  4. [洛谷P1156][codevs1684]垃圾陷阱

    题目大意:一头奶牛掉进了深度为d的坑里,现在有g个垃圾在特定时刻ti扔进来.奶牛可以吃垃圾以获得体力,吃第i个垃圾能获得mi的体力,也可以堆放垃圾以逃生,第i个垃圾高度为hi.当高度≥d时奶牛成功逃生 ...

  5. Spring MVC框架一个实例的手动实现

    文件结构: SpringMVC05 // 应用程序名 ----index.html // 欢迎文件,主目录下的文件可以被URL直接访问到 ----WEB-INF // 这个目录下的文件将被保护起来不能 ...

  6. 公路通行税Ceoi99（BFS+图的直径）

    公路通行税(Ceoi99) 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 在PALMIA国家内,有N个城市由公路相连(每条 ...

  7. HBase为什么快 HBase原理。 HBase几个问题

    背景色表示可以自己做实验搞定 1 模拟一组数据 1.2.3.4.5.6.7.8.9.10     1 入 限定符 'one'     2 入 'two'     3 入 'three'     4 f ...

  8. 18. IDEA 添加 persistence 时没有 sessionFactory

    转自:http://www.voidcn.com/article/p-rryjfhwi-e.html IDEA 添加 persistence 时没有 sessionFactory 点击项目,然后F4 ...

  9. .Net经典笔试题

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答:private:私有成员,在类的内部才可以访问: protected:保护成员,该类内部和 ...

  10. Linux150个常用指令

    线上查询及帮助命令(2个) 文件和目录操作命令(18个) 查看文件及内容处理命令(21个) 文件压缩及解压缩命令(4个) 信息显示命令(11个) 搜索文件命令(4个) 用户管理命令(10个) 基础网络 ...