6.3 v-else
用法：
true不显示，false显示
注意：
不能单独使用，必须要和v-if搭配
v-if和v-else中间不能有多余标签案例：演出实现二者搭配的效果
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divs { border: 1px solid red; width: 100px; height: 150px; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-if=flag id="divs">这是加了v-if渲染的div</div> <div v-else=flag >这是加了v-else渲染的div</div> <input type="button" value="按钮" @click="changeDiv"> </div> <script> new Vue({ el:"#app", data:{ flag:true }, methods:{ changeDiv:function () { //按下按钮触发单击事件的瞬间，flag被取反并同时作用于所渲染的标签体 this.flag=!this.flag; } } }) </script> </body> </html>
案例演示效果：
①变化前
②变化后
6.4 v-show
用法：
根据表达式的值来决定是否显示元素或组件，当表达式的值为真时会显示，否则会隐藏，但是元素仍然会被渲染到 DOM 中。
案例：演示实现v-show的效果
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divs { border: 1px solid red; width: 100px; height: 150px; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- <div v-if=flag id="divs">这是加了v-if渲染的div</div>--> <div v-show=flag id="divs">这是加了v-show渲染的div</div> <input type="button" value="按钮" @click="changeDiv"> </div> <script> new Vue({ el:"#app", data:{ flag:true }, methods:{ changeDiv:function () { //按下按钮触发单击事件的瞬间，flag被取反并同时作用于所渲染的标签体 this.flag=!this.flag; } } }) </script> </body> </html>
案例实现效果：
①渲染前
②渲染后
6.5 v-if 与v-show的区别
使用场景不同
v-if 适用于在条件满足时只渲染一次的情况。
v-show 适用于需要频繁切换显示与隐藏的情况。
why？
因为 v-if 在条件不满足时会从 DOM 中删除元素，而 v-show 则只是通过修改 CSS 样式来隐藏元素，因此 v-show 的性能比 v-if 更好。
七. Vue如何实现列表渲染？
用法：
Vue 的列表渲染可以使用 v-for 指令，它可以遍历数组或对象，并将每个元素渲染出来。
位置：
循环遍历哪个标签，v-for加在哪个标签上
语法：
v-for=" "
7.1 简单数组
案例：在hyml中的无序列表中遍历数据模型中的hobbys并显示在页面中
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="hobby in hobbys">{{hobby}}</li> </ul> <input type="button" value="新增" @click="addHobby"> <input type="button" value="删除" @click="deleteHobby"> </div> <script> new Vue({ el:"#app", data: { hobbys:["Java","mysql","写博客","刷视频号"] } , methods:{ //新增一个习惯 addHobby:function () { this.hobbys.push("CODM") }, //删除一个习惯，从后往前删 deleteHobby:function () { this.hobbys.splice(this.hobbys.length-1,1) } } }) </script> </body> </html>
7.2 对象数值
案例：在table标签中将数据模型中的computers对象数组遍历并显示到页面
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <table> <tr> <th>序号</th> <th>品牌</th> <th>价格</th> </tr> <tr v-for="computer in computers"> <td >{{computer.id}}</td> <td >{{computer.brand}}</td> <td >{{computer.price}}</td> </tr> </table> </div> <script> new Vue({ el:"#app", //遍历对象数值 data: { computers:[ { id:1001, brand:"华为", price: 7800 }, { id:1002, brand:"联想" , price:8900 }, { id:1003, brand:"苹果", price:13000 } ] } }) </script> </body> </html>
需要索引的语法：
v-for=“(变量，index) in 数组”
索引index从0开始，可以加数学运算案例：在刚才的对象数组中加入序号
代码演示如下：
</head> <body> <div id="app"> <table> <tr> <th>索引</th> <th>序号</th> <th>品牌</th> <th>价格</th> </tr> <tr v-for="(computer,index) in computers"> <td>{{index+1}}</td> <td >{{computer.id}}</td> <td >{{computer.brand}}</td> <td >{{computer.price}}</td> </tr> </table> </div> <script> new Vue({ el:"#app", //遍历对象数值 data: { computers:[ { id:1001, brand:"华为", price: 7800 }, { id:1002, brand:"联想" , price:8900 }, { id:1003, brand:"苹果", price:13000 } ] } }) </script> </body> </html>
八. Vue如何实现事件驱动？
语法：
v-on:事件类型=“函数调用”
案例：实现单击事件和change事件
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 单击事件 --> <input type="button" value="按钮" v-on:click="clickTest(10,'java')"><br> <!-- change事件 --> <input type="text" v-on:change="changeTest"> </div> <script> new Vue( { el:"#app", data:{}, methods:{ clickTest:function (a,b) { alert("这是vue绑定并测试的单击事件") alert("传入的值:"+a+"\t"+b) }, changeTest:function () { alert("这是vue绑定并测试的change事件") } } } ) </script> </body> </html>
注意：
上述事件驱动的语法可这样简写：
v-on:click=“clickTest” ==>
@click="clickTest"
下面的methods里的自定义函数可这样简写（不常用）：
clickTest:function (a,b) { alert("这是vue绑定并测试的单击事件") alert("传入的值:"+a+"\t"+b) }
clickTest(){ alert("点击事件绑定成功") }
九. Vue如何实现取消控件默认行为？
9.1 什么是控件默认行为？
控件的默认行为指的是：
点击超链接跳转页面点击表单提交按钮提交表单
9.2 超链接与表单取消控件默认行为
语法
js:event.preventDefault(); //取消控件的默认行为
Vue:@click.prevent=“clickTest” //100%取消案例：模拟实现超链接与表单取消控件默认行为
代码演示如下：
<!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="https://www.baidu.com/" @click="clickTest">跳转至百度</a> <form action="helloworld.html" method="get" @submit.prevent="submitTest" > <input type="text" name="username"> <input type="submit" > </form> </div> <script> new Vue({ el:"#app", data:{}, methods:{ clickTest:function () { //如果你不根让超链接进行跳转 alert("将要跳转至百度") //取消控件的默认行为 event.preventDefault(); }, submitTest:function () { //如果你不根让超链接进行跳转 alert("将要提交表单") //取消控件的默认行为 // event.preventDefault(); } } }) </script> </body> </html>
十. Vue如何实现阻止事件冒泡？
10.1 关于事件修饰符
Vue事件修饰符是Vue提供的一种语法糖，用于简化事件处理程序的编写。
事件修饰符是在事件后面添加的特殊后缀，用于改变事件的行为。
常见的事件修饰符有以下几种：
.stop：阻止事件冒泡.prevent：阻止默认事件.capture：事件捕获阶段触发事件处理程序.self：只有在事件的目标元素上触发事件才会触发事件处理程序.once：只触发一次事件处理程序.passive：告诉浏览器不需要阻止默认事件，以提高性能
10.2 什么是事件冒泡？
指在 HTML 元素嵌套的结构中，当一个事件被触发时，它会从最内层的元素开始，逐层向外传递，直到传递到最外层的元素为止。在这个过程中，如果某个元素绑定了事件处理函数，它就会被调用执行。
例如，当用户在一个按钮上点击鼠标时，click 事件就会被触发，并且会从按钮元素开始沿着层次结构向外传递，直到传递到整个文档的最外层。在传递的过程中，任何绑定了 click 事件的元素都会被调用执行相应的事件处理函数。
10.3 如何实现阻止事件冒泡
语法：
js:event.stopPropagation(); //阻止事件冒泡 vue:@click.stop="div2Test"
案例：模拟实现阻止事件冒泡
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> #div1{ border: 2px solid red; width: 300px; height: 300px; } #div2{ border: 2px solid blue; width: 150px; height: 150px; } </style> </head> <body> <div id="app"> <div id="div1" @click="div1Test"> <div id="div2" @click.stop="div2Test"></div> </div> </div> <script> new Vue({ el:"#app", data:{}, methods:{ div1Test:function () { alert("点击了大红框"); }, div2Test:function () { //发生了事件冒泡：即点中了小蓝框，小蓝框的单击事件于大红框的单击事件先后触发 alert("点击了小蓝框"); //现有需求：点击小蓝框，只触发小蓝框的单击事件 //js的原生阻止方法 // event.stopPropagation(); } } }) </script> </body> </html>
