Vue系列三之：watch观察者与条件渲染

watch观察者

watch顾名思义，就是作为一个观察者的形式存在，只要绑定的数据有所修改，既对应watch里面的函数也会发生响应的变化，可以用来计算某些数值、存储该内容到LocalStorage使用、输入过程中校验表单信息等。
举一个输入账号密码的例子，html代码如下：

上面内容所做的操作是，在账号表单里面，如果输入的字符串个数小于6个的时候会提醒，数字不足；密码在两次输入如果不匹配的时候，也会显示相应的内容，提示不足；其中script代码如下：

我们这里主要留新查看watch这个属性，在这个属性里面填写要监听的数据，如username，既在username变化的时候，对应watch里面的函数也会执行，username:function (val,oldVal)函数主要有两个参数，第一个是即时值，第二个是没有修改之前的数值，这里的账号和密码，我们都使用了简单的比对来判断是否正确。在watch属性里面监听的函数可以做很多事情，即要数据在改变的时候描述其他事情的变化或者激发事件，这里就看个人的需要去感悟了。

条件渲染是什么？

我们可以在刚刚的例子里面看到，html里面有一个v-show，没错，事实上它就是条件渲染中的一个函数,它通过判断绑定函数中是ture和false来决定这个内容是否展示出来，与此相对的，还有另外编程中常见的if-else函数。

v-show：

  
您的账号必须超过6位数字

v-if

success and error

v-else

此处使用vue.js官方的例子：

  Now you see me


  Now you don't

v-for

html代码如下：

    
    

      

        {{ index }} - {{ item.name }} - {{ item.age }}
      
    
    
    

      

        {{ index }} - {{ item.name }} - {{ item.age }}
      
    


 
    

      

        {{ key }}: {{ value }}
      
    

数据来源如下：

遍历渲染如上图所示

小结

• 主要学习了watch的用法，可以在改bind的属性改变时，获得新值和旧值。
• 必须掌握几种遍历方法，特别要注意除了遍历数组还可以遍历属性，可玩性高。