目录
一、绑定样式
此处为下面的例子需要用到的样式：
<style>
.basic{
height: 100px;
width: 200px;
border:2px black solid
}
.mood1{
background-color: red;
}
.mood2{
background-color: skyblue;
}
.mood3{
background-color: slategrey;
}
.shape1{
border-radius: 20px;
}
.shape2{
border-style:double;
}
.shape3{
text-decoration: underline;
}
</style>1.绑定class样式
(1).字符串写法
适用于：要绑定的样式个数不确定、名字也不确定
<body>
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{
{content}}</div>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
content:'test',
mood:'mood2'
}
},
methods: {
changeMood(){
const arr = ['mood1','mood2','mood3']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script> 
:class="mood" 说明 vue 中有个叫 mood 的属性，这个标签的class 就是mood的值
@click="changeMood" 实现了随机切换mood1,mood2,mood3样式的功能
(2).数组写法
适用于：要绑定的样式个数不确定、名字也不确定
<body>
<div id="root">
<div class="basic" :class="classArr" >{
{content}}</div>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
content:'test',
mood:'mood2',
classArr:['shape1','shape2','shape3']
}
})
</script>
在数组中,
元素带引号,说明是类名
元素不带引号就是data中的属性对应的值。
(3). 对象写法
适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
<body>
<div id="root">
<div class="basic" :class="classObj" >{
{content}}</div>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
content:'test',
mood:'mood2',
classObj:{
shape1:false,
shape2:false
}
}
})
</script> 
2.绑定style样式
(1).对象写法
:style="{fontSize:xxx}" 其中xxx是动态值
<body>
<div id="root">
<div class="basic" :style='styleObj' >{
{content}}</div>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
content:'test',
styleObj:{
fontSize:'40px',
color:'red',
backgroundColor:'orange'
}
}
})
</script>
(2). 数组写法
:style="[a,b]" 其中a,b是样式对象
<body>
<div id="root">
<div class="basic" :style='styleArr' >{
{content}}</div>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
content:'test',
styleArr:[
{
fontSize:'40px',
color:'red'
},
{
backgroundColor:'orange'
}
]
}
})
</script>
二、条件渲染
1.v-if
(1).写法
v-if="表达式"
v-else-if="表达式"
v-else="表达式"
(2).适用于
切换频率较低的场景
(3).特点
不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”
v-if和template配合使用，可以保持其内部结构（如下例中连续的三个<h2>标签）
<body>
<div id="root">
<h2>当前的n值是:{
{n}}</h2>
<button @click="n++">点我+1</button>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">Hello,{
{name}}</h2>
<h2 v-if="1 === 1">Hello,{
{name}}</h2>
<div v-if="n===1">Angular</div>
<div v-else-if="n===1">React</div>
<div v-else-if="n===3">Vue</div>
<div v-else>hhhhh</div>
<!-- v-if和template的配合使用 -->
<template v-if="n===1">
<h2>你好</h2>
<h2>张三</h2>
<h2>西安</h2>
</template>
</div>
</body>
<script>
Vue.config.protuctionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
name:'张三',
n:0
}
})
</script> 
2.v-show
(1).写法
v-show="表达式"
(2).适用于
切换频率较高的场景
(3).特点
不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
<body>
<div id="root">
<h2>当前的n值是:{
{n}}</h2>
<button @click="n++">点我+1</button>
<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">Hello,{
{name}}</h2>
<h2 v-show="1 === 1">Hello,{
{name}}</h2>
<div v-show="n===1">Angular</div>
<div v-show="n===2">React</div>
<div v-show="n===3">Vue</div>
</div>
</body>
<script>
Vue.config.protuctionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
name:'张三',
n:0
}
})
</script>
备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
三、列表渲染
v-for指令
1.用处
用于展示列表数据
2.语法
v-for="(item,index) in xxx" :key="yyy"
3.可遍历
1.遍历数组
<body>
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{
{p.name}}-{
{p.age}}-----{
{index}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
persons:[
{id:'001',name:"张三",age:18},
{id:'002',name:"李四",age:19},
{id:'003',name:"王五",age:20},
]
}
})
</script>运行结果：
2.遍历对象
<body>
<div id="root">
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,,key) in car" :key="key">
{
{key}}-{
{value}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
car:{
name:"五菱宏光",
price:"200W",
color:"black"
}
}
})
</script>运行结果：
3.遍历字符串（用的很少）
<body>
<div id="root">
<!-- 遍历字符串 -->
<h2>遍历字符串</h2>
<ul>
<li v-for="(char,index) in str" :key="index">
{
{char}}-{
{index}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
str:"hello"
}
})
</script>运行结果：
4.遍历指定次数（用的很少）
<body>
<div id="root">
<!-- 遍历指定次数 -->
<h2>遍历指定次数</h2>
<ul>
<li v-for="(number,index) of 10" >
{
{index}}-{
{number}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
str:"hello"
}
})
</script>运行结果：
4.key的内部原理
0.使用index和id分别作为key的情况
1.虚拟DOM中key的作用
key是虚拟DOM的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
1.若虚拟DOM中的内容没变，直接使用之前的真实DOM
2.若虚拟DOM中的内容改变，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题
(1).若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新，造成界面效果没问题，但效率低
(2).如果结构中还包含输入类的DOM：
会产生错误DOM更新，导致界面有问题
4.开发中如何选择key?
(1).最好使用每条数据的唯一标识作为key，比如id，手机号，身份证号，学号等唯一值
(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示
使用index作为key是没有问题的