1.v-if、v-show条件渲染，我们一般会使用v-if，因为v-if比较灵活
v-if、v-else-if、v-else这三个搭配使用
<template>
<div id="app">
<p v-if="sex=1">男</p>
<p v-else-if="sex=2">女</p>
<p v-else="sex=3">其他</p>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
sex:1
}
},
}
</script>
如果想让这个dom节点隐藏后再从这个dom节点出现，要使用v-show，通过css隐藏
如果想让这个dom节点直接被抹掉的话,要使用v-if
2.v-for列表渲染，渲染后台的数据
2.1.基本使用方法：循环数组
<template>
<div id="app">
<ul>
<li v-for="item in movies">{{item.movie}}|{{item.rote}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
]
}
},
}
</script>
2.2.除了获取当前数组的元素，还可以获取当前数组的索引
<template>
<div id="app">
<ul>
<li v-for="(item,i) in movies">{{item.movie}}|{{item.rote}}|{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
]
}
},
}
</script>
2.3.循环对象，value：值，prop：属性名，index：索引
<template>
<div id="app">
<ul>
<li v-for="item in movies">{{item.movie}}|{{item.rote}}</li>
<p v-for="(value,prop,index) in person">{{value}}|{{prop}}|{{index}}</p>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
],
person:{
name:"zcy",
age:"2"
}
}
},
}
</script>
2.4.循环数字
<template>
<div id="app">
<ul>
<li v-for="item in movies">{{item.movie}}|{{item.rote}}</li>
<p v-for="(value,prop,index) in person">{{value}}|{{prop}}|{{index}}</p>
<p v-for="num in 10">{{num}}</p>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
}
},
}
</script>
2.4.循环字符串
<template>
<div id="app">
<ul>
<li v-for="item in movies">{{item.movie}}|{{item.rote}}</li>
<p v-for="(value,prop,index) in person">{{value}}|{{prop}}|{{index}}</p>
<p v-for="num in 'zengcy'">{{num}}</p>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
}
},
}
</script>
v-for,可以循环一个数组或者对象或者字符串或者数字；
但是用得比较多的还是循环数组或对象；
事件的使用：绑定点击事件，点击一部电影切换成另一部电影和评分
错误示例：打开控制台发现数据已经改变过来但是并没有渲染页面，在vue中不能直接改变数组里面的数据，数据的改变无法被检测到；
<template>
<div id="app">
<ul>
<li v-for="(item,i) in movies" @click="changeMovie(i)">{{item.movie}}|{{item.rote}}|{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
]
}
},
methods:{
changeMovie:function(index){
this.movies[index]={
movie:"秋香",
rate:"9.5"
}
console.log(this.movies);
}
}
}
</script>
谨记：想改变数组里面的元素，就要改变数组的内存地址，如果内存地址一样，数据就不会发生改变。
所以做一些改动：改变内存地址，这样Vue就可以检测到数据发生了改变
<template>
<div id="app">
<ul>
<li v-for="(item,i) in movies" @click="changeMovie(i)">{{item.movie}}|{{item.rote}}|{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
]
}
},
methods:{
changeMovie:function(index){
/* this.movies[index]={
movie:"秋香",
rate:"9.5"
}*/
let arr=this.movies.concat() //复制
arr[index]={
movie:"秋香",
rate:"9.5"
}
}
}
}
</script>
vue把push方法重写了，所以并不需要我们去改变内存地址
<template>
<div id="app">
<ul>
<li v-for="(item,i) in movies" @click="changeMovie(i)">{{item.movie}}|{{item.rote}}|{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
]
}
},
methods:{
changeMovie:function(index){
/* this.movies[index]={
movie:"秋香",
rate:"9.5"
}*/
let arr=this.movies.concat() //复制
arr[index]={
movie:"秋香",
rate:"9.5"
}
},
add:function(){
this.movies.push({
movie:"秋香",
rate:"9.5"
})
}
}
}
</script>
key属性的使用：倒置的时候，input框没有跟着倒置，所以要加上key属性，这样才能实现input框跟着p标签实现倒置
<template>
<div id="app">
<ul>
<li v-for="(item,i) in movies" @click="changeMovie(i)">{{item.movie}}|{{item.rote}}|{{i}}</li>
</ul>
<template v-for="item in arr">
<p>{{item}}</p>
<input type="text" :key="item">
</template>
<button @click="reverse">倒置</button>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
movies:[
{
movie:"功夫",
rote:'9.9'
},
{
movie:"功夫熊猫",
rote:'8.8'
}
],
arr:[1,2,3]
}
},
methods:{
changeMovie:function(index){
/* this.movies[index]={
movie:"秋香",
rate:"9.5"
}*/
let arr=this.movies.concat() //复制
arr[index]={
movie:"秋香",
rate:"9.5"
}
},
add:function(){
this.movies.push({
movie:"秋香",
rate:"9.5"
})
},
reverse:funciton(){
this.arr.reverse();
}
}
}
</script>
列表渲染中需要注意四个点：
1.template是一个容器，可以在v-if中使用；
2.不能直接改变数组里面的数据；
3.我们可以有一些重写的方法,如push方法，reverse方法，可以检测到我们数组中的数据发生改变；
4.key属性，可以告诉我们每个input都是不一样的；