Min's blog

I choose to see the beauties in the world.

导航

vue 常用指令

Posted on 2017-06-21 11:03  Min77  阅读(217)  评论(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>



 4. v-show


methods:{
       changea:function () {
          if(this.a==true){
              this.a=false;
          }else{
              this.a=true;
          }
       }
}




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


 


 5.事件简写 ： @click