js-basic-code-learning
/
computed&&watch.html

<!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>Document</title>
</head>

<body>

  <div id="app">
    <input type="text" v-model="mytext">
    <ul>
      <li v-for="data in datalistcom" :key="data">
        {{ data }}
      </li>
    </ul>

    <div>------------------------</div>

    <div>
      <!-- <p>单价：<input type="text" v-model="price"></p>
      <p>数量：<input type="text" v-model="number"></p>
      <p>计算金额：{{sum}}</p> -->

      <div>{{ number }}</div>
      <button @click="add">+++</button>
    </div>
  </div>


  <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          datalist: ["aaa", "bbb", "ccc", "ddd", "aa", "a", "cc", "dd"],
          mytext: '',
          price: 100,
          number: 1,
          sum: 0
        }
      },
      watch: {
        // price() {
        //   console.log(this.price)
        //   if (this.price * this.number < 1000 && this.price * this.number > 0) {
        //     this.sum = this.price * this.number + 100
        //   } else {
        //     this.sum = this.price * this.number
        //   }
        // },
        number(newVal,oldVal) {
          console.log('newVal', newVal);
          console.log('oldVal', oldVal);
          // console.log(this.price)
          // if (this.price * this.number < 1000 && this.price * this.number > 0) {
          //   this.sum = this.price * this.number + 100
          // } else {
          //   this.sum = this.price * this.number
          // }
        }
      },
      computed: {
        changeName() {
          return this.name + '123'
        },
        datalistcom() {
          return this.datalist.filter(item => item.indexOf(this.mytext) > -1)
        }
      },
      methods: {
        add () {
          this.number ++;
        }
      },
    })
  </script>
</body>

</html>