- ， 6 8月 2021
- 作者 847954981@qq.com
- 前端学习
Vue基础②
动态绑定 v-bind
在很多情况下，我们需要动态修改标签的属性，如 img 标签的 alt 属性，往往将属性值固定是不行的，此时我们就需要 v-bind 来动态绑定。
代码语言：javascript复制<template>
<div id="app">
<img src="#" v-bind:alt="imgText" />
</div>
</template><script>
export default {
name: "app",
// 数据
data() {
return {
imgText:'周杰伦演唱会图片'
};
}
};
</script>这里可以看出，我们给 img标签的 alt属性动态绑定了 imgText变量以此实现动态变化。
当然也可以写成
代码语言：javascript复制<div id="app">
<img src="#" :alt="imgText" />
</div>其中 :alt 是 v-bind:alt 的简写，即 v-bind: 的简写为 :
模板中的运算符
差值表达式不仅可以表示一个变量，也可以进行简单运算。
代码语言：javascript复制<ul>
<li>{{ goods[0].index 1 }}---{{ goods[0].name }}</li>
<li>{{ goods[1].index 1 }}---{{ goods[1].name }}</li>
<li>{{ goods[2].index 1 }}---{{ goods[2].name }}</li>
</ul> data() {
return {
goods:[
{
index:0,
name:"扫地机器人"
},
{
index:1,
name:"华为手机"
},
{
index:2,
name:"戴尔笔记本"
}
]
};
}除了简单的加减乘除，差值表达式也支持三元运算符：
代码语言：javascript复制<div id="app">
<p>{{ flag?'你已经通过了考试:'你还没有通过考试' }}</p>
</div>data() {
return {
flag:true
};
}这里在 p 标签上添加了三元运算符，并与之后的变量连接。
除了运算符，模板中也可以写入js内置方法
代码语言：javascript复制<div id="app">
<p>{{ message.split('').reverse().join('') }}</p>
</div>这个方法即将message变量内容颠倒显示
注意：不要在模板中滥用表达式，尤其是js内置方法，不然会显得html代码十分臃肿
v-if,v-else,v-else-if
代码语言：javascript复制<p v-if="isShow">{{ message }}</p>这表示只有当isShow为true时，这个标签才会显示。
而v-else与v-else-if 与js中的用途一样，为了规范 if 的范围。
当然这里要注意和js一样这里使用等于判断时，需要使用三个‘=’如：
代码语言：javascript复制<p v-if="questions[0].type==='PICK'">{{ questions[0].content }}</p>v-show
v-show的用法和v-if是一样的，即当条件满足，就会显示标签中的内容，区别就是
- v-show指令只是将标签的display属性设置为none
- v-if指令，如果不满足条件，则此标签在dom中根本不存在。
那么如何选择呢？ 当标签出现以后就不会再次消失，或者消失/出现的频率不高，就用 v-if。 当标签会被频繁的切换，从消失到显示，那么就用v-show。 不过开发中大多数情况下都会用v-if。只不过有些人比较严谨，会考虑切换开销和渲染开销。
列表渲染（v-for）
v-for和 js 中的for循环差不多。
代码语言：javascript复制<div id="app">
<ul>
<li v-for="item in 5" :key="item">{{ item }}</li>
</ul>
</div>即从1开始循环遍历到5，最终得到5个 li标签
循环渲染数组
代码语言：javascript复制<ul>
<li v-for="(item,index) in nameList" :key="index">{{ item }}</li>
</ul><script>
export default {
name: "app",
// 数据
data() {
return {
nameList:["张淮森","周逸依","梁澄静","宁古薄","丘约靖"]
};
}
};
</script>其中{item,index} 第一个为对象，第二个为位置。
需要注意的是，循环渲染数组包含三个值
代码语言：javascript复制<!--
value：对象中每一项的值
key：对象中每一项的键
index：索引
-->
<li v-for="(value,key,index)" :key="index"></li> data() {
return {
book:{
bookName:'指环王',
author:'JK 罗琳'
}
};
}对于以上数组，value代表如“指环王”的值，key代表如“bookName”,index表示位置、
循环渲染数组也可以渲染对象数组。
可以看见，循环渲染时，我们会加上 :key=””
这是Vue工程为了保证每一个item的唯一性，需要一个唯一的key，否则会报错。
