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

watch观察者

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

<template>
  <div class="">
    请输入您的账号：<input type="text" v-model="username"><br>
    <p v-show="checkUsername">您的账号必须超过6位数字</p>

    请输入密码：<input type="password" v-model="password1"><br>
    请再次输入密码：<input type="password" v-model="password2"><br>
    <p v-show="checkPassword">两次输入的密码不一致</p>
    <button type="button" @click="submit">提交表单</button>
  </div>
</template>

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

<script>
export default {
  name: 'hello',
  data () {
    return {
      username:"",
      password1:"",
      password2:"",
      checkUsername:false,
      checkPassword:false
    }
  },watch:{
    username:function (val,oldVal) {
//      console.log(val)
//      console.log(oldVal)
      if(val.length>6){
        this.checkUsername = false;
      }else {
        this.checkUsername = true;
      }
    },
    password2:function (val,oldVal) {
      if (this.password1 != this.password2){
        this.checkPassword = true;
      }else {
        this.checkPassword = false;
      }

    }
  },methods:{
    submit:function () {
      alert("提交成功！")
    }
  }
}
</script>

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

条件渲染是什么？

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

v-show：

  <p v-show="checkUsername">您的账号必须超过6位数字</p>

v-if

<template>
  <div class="">

    <h1 v-if="success">成功</h1>
    <h1 v-if="error">失败</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      success:true,
      error:false
    }
  }
}
</script>

success and error

v-else

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

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-for

html代码如下：

    <!--最原始的遍历-->
    <ul>
      <li v-for="(item, index) in items">
        {{ index }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
    <!--使用of 也可以代替 in-->
    <ul>
      <li v-for="(item, index) of items">
        {{ index }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>


 <!--特别要注意的是：对象的属性也可以进行遍历，这个很有用！-->
    <ul>
      <li v-for="(value, key) in person">
        {{ key }}: {{ value }}
      </li>
    </ul>

数据来源如下：

<script>
export default {
  name: 'hello',
  data () {
    return {
      success:true,
      error:false,
      person:{name:"张三",age:"22",school:"小学"},
      items:[{
        name:"liming",
        age:18
              },{
        name:"hanmeimei",
        age:20}]
    }
  }
}
</script>

遍历渲染如上图所示

小结

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