学习笔记——Vue条件渲染
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的事件绑定
(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 >