首页 > 代码库 > vue 常用指令

vue 常用指令

2024-10-09 15:17:02   214人阅读

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=http://www.mamicode.com/"按钮" 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="http://www.mamicode.com/按钮" v-on:click="add()">
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>
</body>
</html>



 


 


 






 


 


 
vue 常用指令






























        

            
                
                  
                
                

                    联系

                    我们