2.2-6 v-if指令与v-show指令区别
按下F12键，打开控制台查看
- v-if指令满足条件时会渲染到HTML中，不满足条件时，不会渲染
- 使用v-show指令的元素始终会被渲染到HTML中
- 只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式
应用场景的区别
- v-if指令有更高的切换消耗，当v-if指令条件成立的时候会将元素加上，不成立的时候，就会移除DOM，并且内部的指令不会执行
- v-show指令有更高的初始渲染消耗，v-show只是简单的隐藏和显示
2.2-7 指令v-on
v-on指令为HTML元素绑定事件监听
v-on：事件名称 ="函数名称() " 简写形式 @事件名称 ="函数名称()"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> {{message}}<br> <button @click="fun1">点击1</button> <button @dblclick="fun2">双击2</button> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { message: 'Hello world!', } }, methods:{ // 声明了一个叫fun1的方法 fun1(){ // 怎么在方法中使用data对象的变量,需要使用this console.log("button1被点击了",this.message); this.isShow=false if(this.isIf){ this.isIf=false }else{ this.isIf=true } }, fun2(){ console.log("button2被双击了"); }, } }) </script> </html>
2.2-8 指令v-bind
v-bind指令可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）
v-bind:属性名 ="表达式" 简写形式 :属性名 ="表达式"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <div> <img v-bind:src="img1url" width="300px" height="100px" alt=""> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { img1url:'../img/banner1.jpg', } }, }) </script> </html>
2.2-9 指令v-model
v-model指令能轻松实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <form action=""> <!-- 双向数据绑定是表单元素进行绑定 --> <input type="text" name="personNmae" v-model="person.name"> <input type="text" name="age" v-model="person.age"> <select name="love" v-model="person.love"> <option value="eat">吃</option> <option value="drick">喝</option> </select> <input type="radio" v-model="person.sex" name="sex" value="1">男 <input type="radio" v-model="person.sex" name="sex" value="2">女 </form> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { person:{ name:'王琪', age:18, love:'eat', sex:1, }, } }, }) </script> </html>
2.2-10 指令v-for
v-for指令可以遍历data中的数据，并在页面进行数据展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <form action=""> <div> <select v-model="shabi1" name="" id=""> <option v-for="(item, index) in shabi" >{{item}}</option> </select> </div> <div v-for="(attr,key) in person"> {{key}}-{{attr}} </div> </form> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { person:{ name:'王导', age:18, love:'eat', sex:1, }, shabi:["小豪","王导","光头"], shabi1:"小豪", } }, }) </script> </html>
