这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记。
条件渲染
v-if
在 < template > 中配合 v-if 渲染一整组
在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去。然而如果要切换很多元素的时候,一个个的添加就太麻烦了。这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if。最终的渲染结果不会包含 < template > 元素。
Title
Paragraph 1
Paragraph 2
data:{
ok:true
}
我们更改 ok 的值,就可以控制整组的元素了
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”:
Now you see me
Now you don't
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
v-else-if
v-else-if,顾名思义,充当 v-if 的“else-if 块”。可以链式地使用多次:
优秀
及格
不及格
类似于 v-else,v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。
可复用元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。例如,如果你允许用户在不同的登录方式之间切换:
Username
var exp=new Vue({
el:".exp",
data:{
loginType:"username"
},
methods:{
btn:function(){
if(this.loginType==="username"){
this.loginType="email"
}else{
this.loginType="username"
}
}
}
})
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,< input > 不会被替换掉——仅仅是替换了它的 placeholder。
复制上面的代码,在自己的浏览器中试一试。
有时候我们不希望浏览器保留我们输