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的属性改变时，获得新值和旧值。
- 必须掌握几种遍历方法，特别要注意除了遍历数组还可以遍历属性，可玩性高。
网友评论