学习笔记——Vue条件渲染

  • 学习笔记——Vue条件渲染已关闭评论
  • 142 次浏览
  • A+
所属分类:Web前端
摘要

2022-10-27 一、Vue的列表渲染(1)关键字:v-for(2)用法:v-for:”临时变量名 in 列表名”。“列表”的说明是写在script中的Vue中的data中。

2022-10-27

 一、Vue的列表渲染

(1)关键字:v-for

(2)用法:v-for:"临时变量名 in 列表名"。“列表”的说明是写在script中的Vue中的data中。

(3)扩展:在列表渲染中,渲染就是在前端能看见的。需要用到索引的用法。v-for:"(临时变量名,index) in 列表名"

使用实例:

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>Title</title>  6     <script src="vue.js"></script>  7 </head>  8 <body>  9     <div id="app"> 10         <ul> 11             <li v-for="hobby in hobbys">{{hobby}}</li> 12         </ul> 13         <input type="button" value="按钮" @click="addHobby"> 14         <table> 15             <tr> 16                 <th>索引</th> 17                 <th>编号</th> 18                 <th>品牌</th> 19                 <th>价钱</th> 20             </tr> 21             <tr v-for="(computer,index) in computers"> 22 <!--                <td>{{computer.id}}</td>--> 23                 <td>{{index}}</td> 24                 <td>{{computer.id}}</td> 25                 <td>{{computer.brand}}</td> 26                 <td>{{computer.price}}</td> 27             </tr> 28         </table> 29     </div> 30     <script> 31         new Vue({ 32             el:"#app", 33             data:{ 34                 hobbys:['java',"大数据","前端","UI"], 35                 computers:[ 36                     { 37                         id:101, 38                         brand:"联想", 39                         price:5000, 40                     }, 41                     { 42                         id:102, 43                         brand:"外星人", 44                         price:15000, 45                     }, 46                     { 47                         id:103, 48                         brand:"诺基亚", 49                         price:6000, 50                     } 51                 ] 52             }, 53             methods:{ 54                 addHobby:function(){ 55                     this.hobbys.push("读书") 56                 } 57             } 58         }) 59     </script> 60 </body> 61 </html>

    说明:

      ①"th"与“td”的区别,它们都是表示列。th代表页眉(粗体居中显示)也必须放在tr标记内,代表列。

      ②列表中的增加使用的是“push”.

      ③第35行中的“computers”表示的是对象数组。

运行的结果:

学习笔记——Vue条件渲染

 

————————————————————————————————————————

二、Vue的事件绑定

(1)关键字:v-on

(2)用法:v-on:事件类型=“函数调用”

(3)简写形式:@事件类型=“函数调用”

------------

使用实例:

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>Title</title>  6     <script src="vue.js"></script>  7 </head>  8 <body>  9     <div id="app"> 10 <!--        <input type="button" value="按钮" v-on:click="clickText" /><br>--> 11 <!--       简写--> 12         <input type="button" value="按钮" @click="clickTest(10,'java',true)"/><br> 13 <!--        <input type="text" v-on:change="changTest">--> 14         <!--        简写--> 15         <input type="text" @change="changeTest"> 16     </div> 17     <script> 18         new Vue({ 19             el:"#app", 20             data:{}, 21             methods:{ 22                 clickTest:function(a,b,c){ 23                     alert("点击事件绑定成功"+a+b+c) 24                 }, 25                 changeTest:function(){ 26                     alert("值改变事件绑定成功") 27                 } 28             } 29         }) 30     </script> 31 </body> 32 </html>

    说明:在第12行中,增加@时,后面要紧跟“click”,要不然运行时不会出现结果。

 ----------------------

三、取消控件的默认行为

(1)适用控件(超链接、表单)

(2)使用的语句:

event.preventDefault();
如果超链接使用之后,就不会进行跳转到指定的页面;表单中如果是提交,那么就不会提交到指定位置。
----------------
使用的实例
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="vue.js"></script> </head> <body>     <div id="app">         <a href="http://baidu.com" @click="clickTest">点击跳转至百度</a>         <form action="01_HelloWorld.html" method="" >             <input type="text" name="username">             <input type="submit">         </form>     </div>     <script>         new Vue({             el:"#app",             data:{},             methods:{                 clickTest:function(){                     alert("点击了超链接");                     //如果不想让超链接进行跳转                     event.preventDefault();//取消控件的默认行为                 },                 subitTest:function(){                     alert("表单即将被提交")                     event.preventDefault();//取消控件的默认行为                 }              }         })     </script> </body> </html>

四、阻止事件冒泡

(1)含义:例如:一个大框套一个小框,点击大框时,弹出“点击了大框”;如果点击小框时,弹出“点击了小框”。而不会点击小框时,先弹出“点击了小框”,后弹出“点击了大框”。

(2)使用的语句:

event.stopPropagation();
使用实例:
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="vue.js"></script>     <style>         #div1{             border: 1px solid red;             width: 300px;             height: 300px;         }         #div2{             border: 1px solid blue;             width: 100px;             height: 100px;         }     </style> </head> <body>     <div id="app">         <div id="div1" @click="div1Test">             <div id="div2" @click="div2Test"></div>         </div>     </div>     <script>         new Vue({             el:"#app",             data:{},             methods:{                 div1Test:function(){                     alert("点击了大框");                  },                 div2Test:function(){                     alert("点击了小框");                     event.stopPropagation();//阻止事件冒泡                 }             }         })     </script> </body> </html>

五、属性侦听

(1)作用:当数据模型的值发生变化时,被Vue监听到,然后执行一个函数。

(2)用法:在Vue中的methods后面设置了一个“watch:”,在这里面设置它的函数变换。

使用实例

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="vue.js"></script> </head> <body> <div id="app">     <p>尊姓:{{firstName}}</p>     <p>大名:{{lastName}}</p>     <input type="text" v-model="firstName"><br>     <input type="text" v-model="lastName"><br>     <p>全名:{{pullName}}</p> </div> <script>     new Vue({         el:"#app",         data:{             firstName:"詹姆斯",             lastName:"哈登",             pullName:"詹姆斯.哈登"         },         methods:{          },         watch:{             firstName:function () {                 this.FullName = this.firstName +"."+ this.lastName            },             lastName:function () {                 this.FullName = this.firstName +"."+ this.lastName             },         }     }) </script> </body> </html>