首页 > 其他 > 详细

vue 常用指令

时间:2017-06-21 13:06:28      阅读:406      评论:0      收藏:0      [点我收藏+]

vue常用指令:

1. v-model   一般用在表单元素   input-->  text  ---> v-model=‘msg‘

2. 循环数组:

<li v-for="(value,index) in arr">
    {{value}}{{index}}
</li>

 3.循环json:

<li v-for="(value,key) in json">
            {{value}} {{key}}
        </li>

 

事件:

new Vue({
el:‘.box‘,
data:{},
methods:{
show:function () {
alert(1);
}
}
});



<div class="box">
<input type="button" value="按钮" v-on:click="show()">
</div>


 v-on:click
 v-on:mouseover
 v-on:mouseout
 v-on:dblclick
 v-on:mouseup
 v-on:mousedown
    <script>
        window.onload=function () {
         new Vue({
                el:‘.box‘,
                data:{
                    arr:[‘width‘,‘height‘,‘back‘,‘font‘]
                },
             methods:{
                    add:function () {
                        this.arr.push(‘aaa‘);
                    }
             }
            });
        };
    </script>
</head>
<body>
<div class="box">
    <input type="button" value="按钮" v-on:click="add()">
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>
</body>
</html>

 

 
 


 
 
 

vue 常用指令

原文:http://www.cnblogs.com/minty/p/7058524.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!