Vue 条件判断和循环判断和filters过滤器(33-44)
1.v-if v-else-if v-else
2.小问题
用户登录案例<br> <span v-if ="isUser"> <label for="username">用户账号：</label> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <span v-else> <label for="useremail">用户邮箱：</label> <input type="text" id="useremail" placeholder="用户邮箱" key="useremail"> </span> <button @click="isUser = !isUser">切换用户</button>
提醒：因为Vue底层会渲染虚拟DOM，所以如果input中有值不会因为‘切换用户’清空。
解决：在input上添加key，并且key值不同
3.v-show 会显示dom，改变display的值
4.v-for 遍历 数组、对象
1.v-for 遍历数组
当遍历的数据需要中间修改修改时候，我们添加一个key值，可根据diff算法，优化性能。
（例：<li v-for=“item in nums” :key="item">{{item}}</li>）这里的key要是用item和显示内容一致，并且item在nums中属于唯一值。
2.响应式的方法
push（）最后面添加一个或多个、
pop（）删除最后一个
shift（）删除第一个
unshift（）最前面添加
splice（）删除/插入/替换元素
sort（）排序
reverse（）反转
不能做到响应式的方法
通过索引值修改数组的元素： this.num[0] = "aaa" 不会生效
Vuede set()解决办法：set(nums, index, item)（要修改的对象，索引，修改后的值）
5.filters： 过滤器
6.实战案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> <style> .active{color:red} td{padding:15px;} </style> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | finalPrice}}</td> <td> <button @click="subtract(index)" v-bind:disabled="item.count <= 1">-</button> {{item.count}} <button @click="add(index)">+</button> </td> <td> <button @click="removerHandler(index)">移除</button> </td> </tr> </tbody> </table> <h2>总价格：{{totaPrice | finalPrice}}</h2> </div> <h2 v-else>购物车为空</h2> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el:"#app", data: { books:[ {id:1,name:'数学',date:'2006-9',price:85.00,count:1}, {id:2,name:'语文',date:'2011-9',price:59.00,count:1}, {id:3,name:'英语',date:'2015-9',price:6.00,count:1}, {id:4,name:'物理',date:'2005-9',price:82.00,count:1}, {id:5,name:'化学',date:'2008-9',price:128.00,count:1} ] }, computed:{ totaPrice(){ let totaPrice = 0 for ( let i in this.books){ totaPrice += this.books[i].price * this.books[i].count } return totaPrice } }, methods: { subtract(index){ this.books[index].count-- }, add(index){ this.books[index].count++ }, removerHandler(index){ this.books.splice(index,1) } }, filters: { finalPrice(price){ return "¥" + price.toFixed(2) } } }) </script> </body> </html>
