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>