vue-常用指令

一、常用指令

  • v-model 双向数据绑定（常用于表单元素）
1 <div id="app1">
2 
3   用户名：<input type="text" v-model="name"><br>
4   {{name}}<br>
5   {{age}}<br>
6   {{flag}}<br>
7   {{nums}}<br>
8   {{user}}<br>
9 </div>
 1 <script>
 2   window.onload = function(){
 3     new Vue({
 4       el:'#app1',
 5       data:{
 6         name:'monica',
 7         age:20,
 8         flag:false,
 9         nums:[1,2,3,4],
10         user:{
11           id:1001,
12           name:"tom",
13           age:20
14         },
15       }
16     });
17   }
18 </script>

 

  • v-for for循环遍历数组/对象
  <ul>
    <!--值循环（普通循环）-->
    <li v-for="value in nums">{{value}}</li>
    <li v-for="value in user">{{value}}</li>
    <!-- 键值循环-->
    <li v-for="(value,key) in nums">{{value}}={{key}}</li>
    <li v-for="(value,key) in user">{{key}}={{value}}</li>
    <!--  循环包含重复数据的集合-->
    <li v-for="(value,key) in nums2">{{key}},{{value}}</li>
  </ul>
    <!-- 循环遍历数组对象 -->
  <ul>
    <li v-for="(user,index) in users">{{index+1}},{{user.id}},{{user.name}},{{user.age}}</li>
  </ul>
 1 <script>
 2   window.onload = function(){
 3     new Vue({
 4       el:'#app1',
 5       data:{
 6         nums2:[10,20,30,10,20],
 7         users:[
 8           {
 9             id:1002,
10             name:"tom",
11             age:20
12           },
13           {
14             id:1003,
15             name:"mike",
16             age:25
17           },
18           {
19             id:1004,
20             name:"monica",
21             age:29
22           },
23         ]
24       }
25     });
26   }
27 </script>

 

  • v-on 绑定事件（v-on:事件=“函数名()”）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>常用指令v-on</title>
 6   <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 7   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           arr:[10,20,30,40,50]
15         },
16         //methods用来存储方法
17         methods:{
18           show:function(){
19             console.log("执行show方法")
20           },
21           add:function(){
22             console.log("这里的this",this)
23             this.arr.push(80)
24           }
25         }
26       })
27     }
28   </script>
29 </head>
30 <body>
31   <div id="hello">
32     <button v-on:click="show()">点我</button>
33     <br>
34     <button v-on:click="add()">添加数组元素</button>{{arr}}
35     <br>
36     <button v-on:dbclick="show()">鼠标双击时dbclick执行show方法</button>
37     <br>
38     <button v-on:mouseover="show()">鼠标经过时mouseover执行show方法</button>
39   </div>
40 </body>
41 </html>

 

  • v-show用来显示元素，是通过display实现的（v-show为true，display=true，v-show为false，display=none。）
  • v-if  用来显示元素，是通过删除/重建元素实现的（v-if为false，则删除元素，v-if为true，则创建该元素。）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>常用指令v-show</title>
 6   <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 7   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true
15         },
16         //methods用来存储方法
17         methods:{
18           hideDiv:function(){
19             this.flag=false
20           },
21           showDiv:function(){
22             this.flag=true
23           },
24           changeDiv:function(){
25             this.flag=!this.flag
26           }
27           }
28       })
29     }
30   </script>
31 </head>
32 <body>
33 <div id="hello">
34   <button v-on:click="hideDiv()">隐藏</button>
35   <button v-on:click="showDiv()">显示</button>
36   <button v-on:click="changeDiv()">切换</button>
37   <div style="width:100px;height:100px;background-color: #42b983" v-if="flag"></div>
38 </div>
39 </body>
40 </html>

 

视频说明v-show和v-if的区别

 

二、其他指令

  • v-once 数据只绑定一次
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           msg:'欢迎来到<text>腾讯出品的</text>王者荣耀！'
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24   /*v-cloak必须配置css样式才生效*/
25     [v-cloak]:{
26       display: none;
27     }
28   </style>
29 </head>
30 <body>
31 <div id="hello">
32   <input type="text" v-model='msg'>
33     <h3 v-text='msg'></h3>  
34     <h3 v-html='msg'></h3>
35     <h3 v-once>数据只绑定一次呀</h3>
36 </div>
37 </body>
38 </html>
  • v-pre 不编译，直接远样显示
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           msg:'欢迎来到<text>腾讯出品的</text>王者荣耀！'
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24   /*v-cloak必须配置css样式才生效*/
25     [v-cloak]:{
26       display: none;
27     }
28   </style>
29 </head>
30 <body>
31 <div id="hello">
32   <input type="text" v-model='msg'>
33     <h3 v-text='msg'></h3>  
34     <h3 v-html='msg'></h3>
35     <h3 v-once>数据只绑定一次呀</h3>
36     <h3 v-pre>{{msg}}</h3>
37 </div>
38 </body>
39 </html>

 

posted @ 2021-08-19 09:10  AnnLing  阅读(138)  评论(0)    收藏  举报