Vue02
Vue指令补充
<!-- v-model.trim 去除文本前后的空格，只保留没有前后空格的文本内容 v-model.number 将文本中可以转成number的字符串变成字符串 --><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border: 3px solid black; font-size: 30px; margin-top: 10px; } .pink{ background-color: pink; } .big{ width: 300px; height: 300px; } </style> </head> <body> <div id="app"> <div class="box" v-bind:class="{pink:true,big:false}" > 盒子1 </div> <div class="box" v-bind:class="['pink','big']"> 盒子2 </div> </div> </body>v-bind导航栏菜单切换
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { display: flex; border-bottom: 2px solid #e01222; padding: 0 10px; } li { width: 100px; height: 50px; line-height: 50px; list-style: none; text-align: center; } li a { display: block; text-decoration: none; font-weight: bold; color: #333333; } li a.active { background-color: #e01222; color: #fff; } </style> </head> <body> <div id="app"> <ul> <!-- @click单击事件里面可以动态去获取选中的下标 --> <!-- 高亮判定条件，当前列表项下标等于选中列表项的下标 --> <li v-for="(item,index) in list" :key="item.id" @mouseover="activeIndex=index"> <a :class="{active:index===activeIndex}" href="">{{item.name}}</a> </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> const v = new Vue({ el:"#app", data:{ activeIndex:4, list:[ {id:1,name:"京东秒杀"}, {id:2,name:"每日特价"}, {id:3,name:"品类秒杀"} ] } }) </script>v-bind控制行内样式
v-model作用域其他表单上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h3>个人信息注册</h3> 姓名： <input type="text" v-model="username"> <br><br> 是否单身： <input type="checkbox" v-model="isSingle"> <br><br> <!-- 前置理解： 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥 2. value: 给单选框加上 value 属性，用于提交给后台的数据 结合 Vue 使用 → v-model --> 性别: <input v-model="gender" type="radio" name="sex" value="1">男 <input v-model="gender" type="radio" name="sex" value="2">女 <br><br> <!-- 前置理解： 1. option 需要设置 value 值，提交给后台 2. select 的 value 值，关联了选中的 option 的 value 值 结合 Vue 使用 → v-model --> 所在城市: <select v-model="cit"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="cd">成都</option> <option value="nj">南京</option> </select> <br><br> 自我描述： <textarea v-model="desc"></textarea> <button>立即注册</button> </div> <script src="js/vue.js"></script> <script> Vue.config.devtools = true; const app = new Vue({ el: '#app', data: { username:'', isSingle: false, gender:1, city: '', desc:'' } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h3>礼物清单</h3> <table> <tr> <td>名字</td> <td>数量</td> </tr> <tr v-for="(item,index) in list"> <td>{{item.name}}</td> <td>{{item.num}}个</td> </tr> </table> <!-- 目标：统计总和，使用computed统计总数，使用函数名称一定不要带"()" --> <p>礼物总数：{{gettotalcount}}</p> </div> </body> <script src="js/vue.js"></script> <script> Vue.config.devtools = true; const v = new Vue({ el:"#app", data:{ list:[ {id:1,name:"篮球",num:1}, {id:2,name:"玩具",num:2}, {id:3,name:"铅笔",num:5}, ] }, computed:{ gettotalcount(){ //定义计算逻辑，将list中的num取出进行累加 return this.list.reduce((sum,item)=>sum + item.num,0) } } }) </script> </html>简而言之，methods的函数方法每次调用都会执行一次，computed会使用缓存，一次刷新最多执行一次
<body> <div id="app"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> <p>姓名：{{fullName}}</p> <button @click="changeName()">修改姓名</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName: '', lastName:'' }, methods:{ changeName(){ this.fullName = "张小飞" } }, computed: { //定义计算属性 获取结果 /* fullName(){ return this.firstName + this.lastName } */ fullName:{ get(){ return this.firstName + this.lastName }, set(value){ this.firstName = value.slice(0,1); this.lastName = value.slice(1); } } } }) </script> </body>set方法会在调用=时，将=后面的内容当作value传入
<!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 监听简单的数据：<input type="text" v-model="username"> 监听对象的属性：<input type="text" v-model="user.name"> </div> </body> <script src="js/vue.js"></script> <script> Vue.config.devtools = true; const vue = new Vue({ el:"#app", data:{ username:'eric', user:{name:'kobe'} }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log('新值:',newValue,'旧值:',oldValue) }, //监听对象的属性 'user.name'(n1,n2){ console.log('新值:',n1,'旧值:',n2) } } }) </script> </html><!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 监听简单的数据：<input type="text" v-model="username"> 监听对象的属性：<input type="text" v-model="user.name"> 深度监听：<input type="text" v-model="emp.empname"> <input type="text" v-model="emp.address"> </div> </body> <script src="js/vue.js"></script> <script> Vue.config.devtools = true; const vue = new Vue({ el:"#app", data:{ username:'eric', user:{name:'kobe'}, emp:{ empname:"jass",address:"USA" } }, computed:{ newEmp(){ return JSON.stringify(this.emp); } }, watch:{ //监听简单的数据 username(newValue,oldValue){ console.log('新值:',newValue,'旧值:',oldValue) }, //监听对象的属性 'user.name'(n1,n2){ console.log('新值:',n1,'旧值:',n2) }, //深度监听 "newEmp":{ handler(nv,ov){//nv:属性值发生变化的对象 ov:原来的值对应的对象 console.log("新：", JSON.stringify(nv),"旧：",JSON.stringify(ov)); }, deep:true, //开启深度监听 immediate:true, //开启立即监听 } } }) </script> </html>