條件渲染和列表渲染
1.指令v-if和v-show
只需要爲元素掛上v-if指令即可，與之配套的還有v-else-if和v-else，不過它們只能與v-if配合使用；v-show也可用於實現條件渲染，只不過他只是簡單的切換CSS屬性：display。當條件爲假時，元素的display屬性將被賦值爲none，反之，display屬性將被回覆原有值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
<h1>---------------v-if----------------</h1>
<h2 v-if="order === 0">v-if</h2>
<h2 v-else-if="order === 1">v-else-if</h2>
<h2 v-else>v-else</h2>
<button @click="toggleTitle">切換標題</button>
<h1>-----------v-show-------------</h1>
<h2 v-show="visible">v-show,visible = true</h2>
<h2 v-show="!visible">v-show,visible = false</h2>
<h2 v-if="visible">v-if,visible = true</h2>
<h2 v-else>v-if,visible = false</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data(){
return{
order:0,
visible:false
}
},
methods:{
toggleTitle(){
this.order = ++ this.order % 3;
console.log('order的值爲：',this.order);
}
}
});
</script>
</body>
</html>
- v-if在切換中，當組件被銷燬時，它將無法被任何方式獲取，因爲它已經不存在DOM中。
- v-show有更高的初始渲染開銷，而v-if具有更高的切換開銷。
- v-show不支持template元素
2.指令v-for
可以使用item initems 或者item of items的語法，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
<div style="float: left;width: 160px;">
<h2>用戶列表</h2>
<ul>
<li v-for="(item,index) in users">{{index}}----------{{item.name}}</li>
</ul>
</div>
<div style="margin-left: 170px;overflow: hidden">
<h2>用戶列表</h2>
<ul>
<li v-for="(item,uIndex) in users">{{uIndex}}----------{{item.name}}
<ul>
<li v-for="(value,key) of item">{{key}}----{{value}}</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
users: [
{name: '張三', age: 24, city: '西安'},
{name: '李四', age: 24, city: '西安'},
{name: '王五', age: 24, city: '西安'},
{name: '趙六', age: 24, city: '西安'},
{name: '田七', age: 24, city: '西安'}
]
}
},
methods: {
toggleTitle() {
this.order = ++this.order % 3;
console.log('order的值爲：', this.order);
}
}
});
</script>
</body>
</html>
- 與數據響應有關的數組方法
| 名稱 | 說明 |
|---|---|
| push | 將一個或者多個元素添加至數組末尾，並返回新數組的長度 |
| pop | 從數組中刪除並返回最後一個元素 |
| shift | 從數組中刪除並返回第一個個元素 |
| unshift | 將一個或多個元素添加至數組開頭，並返回新數組的長度 |
| splice | 從數組中刪除元素或向數組中添加元素 |
| sort | 對數組元素排序，默認按照Unicode編碼排序，並返回排序後的數組 |
| reverse | 將數組中的元素位置顛倒，返回顛倒後的數組 |
下面簡單例舉了push()和reverse（）方法，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-if和v-show</title>
</head>
<body>
<div id="app">
<h2>用戶列表</h2>
<button @click="createUser">創建用戶</button>
<button @click="reverse">倒序數組</button>
<ul>
<li v-for="(item,index) in users">用戶{{index + 1}}
<ul>
<li v-for="(value,key) of item">
<strong style="display: inline-block;width: 60px;">{{key}}</strong>
<span>{{value}}</span>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
users: []
}
},
methods: {
random(factory,base) { //生成隨機數
return Math.floor(Math.random() * (factory || 1) + (base || 0));
},
createUser(){
//獲取獲取name大寫首字母
var fLetter = 'BHDFKLJL'[this.random(7.999)];
//隨機截取name字符串
var nameStr = 'abcdefghijklmnopqrstuvwxyz';
var bLetters = nameStr.substr(this.random(19.999),this.random(3.999,3))
var user = {
name:fLetter + bLetters,
age:this.random(5.9999,25),
city:['西安','上海','北京','成都','大連','深圳'][this.random(5.999)]
}
console.log('-----------------創建用戶-------------');
this.users.push(user);
},
reverse(){
console.log('----------------倒序列表---------------');
console.log('Before:',this.users.map(user =>user.name));
this.users.reverse();
console.log('After:',this.users.map(user =>user.name));
}
}
});
</script>
</body>
</html>
在使用v-for時，最好爲每個迭代元素提供一個值不重複的key，當列表渲染被重新執行時，如果不使用key，Vue回味數組成員就近複用已存在的DOM節點
小白一枚，如有問題，請多多指教😃