Day2.vue(遇到的问题及computed、watch)

老问题

1.forEach(item，i)，用于遍历数组，

2.map（item，i），return 后得到一个新的数组，如：

//this.list 用来接收ruturn返回的值
this.list=this.list.map((item, i) => {
                        //判断条件之后，返回新的item
                            if (item.id == id) {
                                item.status = !item.status
                            }
                            return item;
                    })

3.filter(item,i),return后跟的是留下的条件，如：

//this.list用来接收return返回的值
this.list = this.list.filter((item) => {
                        //return留下的就是id不相等的，组成一个新的数组
                        return item.id !== id;
                    })

4.some()和every(),some和every得到的(return)都是布尔值,some只要有一个满足就true，every需要所有都满足才true

新的问题及注意点

1.vue中使用v-for方法适合，后面必须跟上：key='值'，这个值一般是id。

2.使用插值表达式渲染页面时，可以使用三目运算符判断对象中的值来决定显示的数据内容。

新的知识

1.computed

这是一个计算属性的关键词(目的还是为了实现双向绑定获取新的数据)，里面是方法名字，方法名可以看做data里的属性直接使用（return回来的值）

写法：

 <div id="app">
      姓：<input type="text" v-model="xing">
      名：<input type="text" v-model="ming">
      {{ username }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        xing: '',
        ming: ''
      },
      computed: {
        // 计算属性，它是有依赖缓存，只有所依赖的属性发生变化的时候才会重新计算
        // 是一个方法，必须有return，返回的值就是这个计算属性的值
        // 名称可以直接作为data使用
        username () {
          return this.xing + this.ming
        }
      }
    })

2.computed的get和set方法

computed中用到get和set方法时候，computed里写的是一个对象，对象里面在去写get和set的方法，get值需要return，set不需要return。用法和define-preperty相似。

例：

 <div id="app">
        姓：<input type="text" v-model="a">
        名：<input type="text" v-model="b">
        姓名：<input type="text" v-model="ab">
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                a:'',
                b:''
            },
            computed: {
                //定义一个ab对象，return回来的值可看做在data上的，直接使用，get方法得到的就是a+b的值，
                ab:{
                    get() {
                        return this.a+this.b
                    },
                    set(num) {
                        //当ab的值改变时，才会触发set方法重新赋值实现双向绑定
                        console.log(num)
                         this.a=num.slice(0,1)
                         this.b=num.slice(1)
                    }
                }
            }
        })
    </script>

3.watch(不推荐使用)

监听一个值的改变，只要发生了改变都要触发这个函数，每一个watch的值都是一个方法，方法的两个参数第一个是修改之后的值，第二个是修改之前的值，以上例子为例

 new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                ab:'',
            },
           watch: {
               //监听a的改变，
                a (news,old){
                    console.log(news,old);
                    this.ab=news+this.b;
                },
                b (news,old){
                    this.ab=news+this.a;
                },
                ab(news,old){
                    this.a=news.slice(0,1)
                    this.b=news.slice(1);
                }
           }
        })