Vue的条件渲染、计算属性和侦听器属性

key的作用

key的作用主要是为了高效的更新虚拟DOM，此处的key就好比数据库里面主键的概念，通过它可以唯一的确定一组节点。

• v-for 指令必须搭配:key

<li v-for="item of list" :key="item.id">

条件渲染

• v-if

//v-if单分支,值为布尔类型，true \ false
<li v-if="status">{{message}}</li>
//多分支 v-if v-else-if
<li v-if="num >= 0 && num < 2">{{message[0]}}</li>
<li v-else-if="num > 2 && num < 10">{{message[1]}}</li>
<li v-else-if="num > 11 && num < 20">{{message[2]}}</li>
<li v-else>{{message[3]}}</li>
<script>
const vm = new Vue({
    el: ".app",
    data() {
    return {
        status: 8,
        message: ["susses", "error", "404", "lose"],
    };
},
});
</script>

• v-show

<p v-show="num">{{message[3]}}</p>
num: true,
message: ["susses", "error", "404", "lose"],

计算属性

<div class="app">
      <p>数量：<input type="number" v-model="num" min="0" /></p>
      <p>单价:{{price}}</p>
      <p>金额：{{amount}}</p>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
          };
        },
        //计算属性用conputed声明
        computed: {
          amount() {
          //如果数量大于10，单价变成40
          if (this.num >= 10) this.price = 40;
            return (this.res = this.num * this.price);
          },
        },
      });
    </script>

侦听器属性

 <div class="app">
      <p>数量：<input type="number" v-model="num" min="0" :max="max" /></p>
      <p>单价:{{price}}</p>
      <p>金额：{{res}}</p>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
            max: 20,
          };
        },
        watch: {
          num(newValut, oldValue) {
            this.res = newValut * this.price;
            if (newValut >= 5) {
              this.max = newValut;
              alert("本商品最大购买数量为" + newValut);
            }
          },
        },
      });
    </script>