开发者社区> 桃子红了呐> 正文

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

简介:
+关注继续查看

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,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue.js列表渲染指令v-for
Vue.js列表渲染指令v-for
11 0
Vue——03-01v-on的基本使用、参数传递、以及v-on的修饰词
v-on的基本使用、参数传递、以及v-on的修饰词
18 0
Vue中 使用 v-for 时动态绑定 ref
Vue中 使用 v-for 时动态绑定 ref
354 0
Vue指令03——v-bind和v-for的使用
Vue指令03——v-bind和v-for的使用
45 0
Vue中判断语句和循环语句的基础用法 v-if和v-for的注意事项
以下的内容让你了解vue中判断语句和循环语句的基础用法v-if和v-for的注意事项。
132 0
vue相关面试题:1.vue-route 3种导航钩子 2.Vue 生命周期 3.v-if和v-for不能一起用
三、注意事项 1.永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断) 2.如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环 3.如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示
79 0
前端-vue基础25v-i和v-for结合使用
前端-vue基础25v-i和v-for结合使用
82 0
vue再读15-系统指令v-for对象
vue再读15-系统指令v-for对象
30 0
vue再读14-系统指令v-for
vue再读14-系统指令v-for
45 0
+关注
桃子红了呐
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载