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都是不一樣的；