vue.js 的模板语法,列表渲染和条件渲染
1. 模板语法
-
alert console.log 不能用
-
if条件改成使用三元表达式(三目运算)
-
方法,函数一定要写在methods里面, 不要直接写在模板语法中
-
模板语法中支持使用匿名函数可以直接写
<p> fun: {{ (function(){ return 1+1 })() }}</p>
列表渲染
使用 v-for指令
v-for指令可以识别所有数据类型和数组,对象
item表示随便起什么名字都可以; 等于号后面的第一个参数为内容,如果需要下标或者key,可以用括号括起来,括号里第一个是下标,第二个是值,第三个是key,不需要的可以不用写。等于号后面第二个参数是 in 也就是for in遍历,第三个参数是你在vue实例中data中自定义的数据,可以是各种数据类型,数组或者对象。话不多说,看代码,等于号只是连接符,写不写都可以
总结:
- v-for 最多可以有三个参数
- 格式
v-for = “(index,item,key) in data”
名词解释:
index: 索引
item; data中的每一个
key; 如果是对象, 表示对象的key - v-for如果有循环嵌套, 那么value可以写成一样的命名, 但是我们建议大家写成不一样的命名, 理由: 比较语义化
- v-for 可以循环 数字或是一个字符
扩展:
v-for = ’ item in data’ 等于号后面的就是相当于参数 然后底层将这个字符串做了分割处理
底层:
function v-for( arg ){
//做字符串处理
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}
条件渲染
条件渲染分为两种,一种是 v-if ,一种是 v-show
- v-if又分为单路分支和双路分支或者是多路分支; 只有if后面的值为true时才会有这个dom元素,为false时不会有这个dom元素
<script>
new Vue({
el:'#app' ,
data:{
f:true,
text:'a'
}
})
</script>
- 单路分支
<p v-if = " f ">
true
</p>
- 双路分支
<p v-if = " f ">
true
</p>
<p v-else>
false
</p>
- 多路分支
<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>
v-show
<p v-show = " f ">
if条件
</p>
v-if vs v-show
- v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
1.5.如果一开始条件为真的话,v-if不会生成dom元素,而v-show不管条件是否为真都会产生dom元素
- 性能
- 如果条件为假,v-show有较高的初始渲染开销
- v-if 有更高的切换开销
项目中建议:
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。