一、class與style綁定
- 1.在應(yīng)用界面中, 某個(些)元素的樣式是變化的
class/style綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù)
2. class綁定:
class='xxx'
xxx是字符串: 'classA'
xxx是對象: {classA:isA, classB: isB}
xxx是數(shù)組: ['classA', 'classB']
3. style綁定
：style="{color: activeColor, fontSize: fontSize + 'px'}",activeColor/fontSize是data屬性
<style>
.aClass {
color: #f00;
}
.bClass {
color: #00f;
}
</style>
<div id="demo1">
<h1>class綁定</h1>
<p class="cClass" :class="a">xxx是字符串</p>
<!--屬性名:類的名字乍楚，屬性值:true/false-->
<p :class="{aClass: isA, bClass: isB}">xxx是對象</p>
<p :class="['aClass', 'bClass']">xxx是數(shù)組</p>
<button type="button" @click="update">更改</button>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">style綁定</p> <!--{} 是js對象-->
</div>
<script>
var vm1 = new Vue({
el: '#demo1',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'red',
fontSize: 20
},
methods: {
update() {
// 一定用this引用data中變量名
this.a = 'bClass';
this.isA = false;
this.isB = true;
this.activeColor = 'green';
this.fontSize = 30;
}
}
});
</script>
二当编、條件渲染指令：
- v-if
- v-else
- v-show
- v-if 與 v-show的區(qū)別
v-if 隱藏是通過將標(biāo)簽移除；v-show是通過style display=none,標(biāo)簽還存在徒溪；v-if還需要創(chuàng)建標(biāo)簽才可以顯示忿偷，標(biāo)簽過多的話影響速度拧篮。
<div id="demo2">
<p v-if="ok">成功了</p>
<p v-else>失敗</p>
<p v-show="ok">show成功了</p>
<p v-show="!ok">show失敗</p>
<button @click="ok=!ok">切換</button>
</div>
<script>
new Vue({
el: '#demo2',
data: {
ok: false
}
})
</script>
三、列表渲染
- 定義: 使用
v-for指令根據(jù)一組數(shù)組的選項列表進行渲染 - 注:1.
v-for是1.0之后的版本才有的牵舱，1.0之前的版本用v-repeat串绩；
2.在 v-for 塊中，我們擁有對父作用域?qū)傩缘耐耆L問權(quán)限芜壁。v-for 還支持一個可選的第二個參數(shù)為當(dāng)前項的索引礁凡；
3.vue本身只是監(jiān)視數(shù)組的改變，沒有監(jiān)視數(shù)組內(nèi)部數(shù)據(jù)的改變慧妄，因此vue重寫了數(shù)組中的一系列改變數(shù)組內(nèi)部結(jié)構(gòu)數(shù)據(jù)的方法顷牌，即變異方法，如splice塞淹、push等窟蓝，可實現(xiàn)--原生功能、更新界面
1饱普、替換與刪除
<!--
1. 列表顯示
數(shù)組: v-for / index
對象: v-for / key
2. 列表的更新顯示
刪除item
替換item
-->
<div id="demo">
<h2>測試: v-for 遍歷數(shù)組</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
--<button @click="deleteP(index)">刪除</button>
--<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
</li>
</ul>
<button @click="addP({name: 'xfzhang', age: 18})">添加</button>
<h2>測試: v-for 遍歷對象</h2>
<ul>
<li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [ // vue本身只是監(jiān)視persons的改變运挫，沒有監(jiān)視數(shù)組內(nèi)部數(shù)據(jù)的改變
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
methods: {
deleteP (index) {
// 刪除persons中指定index的內(nèi)容
this.persons.splice(index, 1)
// 此處splice，調(diào)用了不是原生數(shù)組的splice(), 而是一個vue變異方法套耕，功能： // 1. 調(diào)用原生的數(shù)組的對應(yīng)方法 // 2. 更新界面
},
updateP (index, newP) {
console.log('updateP', index, newP)
// this.persons[index] = newP // 并沒有改變persons本身谁帕，數(shù)組內(nèi)部發(fā)生改變，并沒有調(diào)用變異方法
this.persons.splice(index, 1, newP)
// this.persons = [] //改變person
},
addP (newP) {
this.persons.push(newP)
}
}
})
</script>
2冯袍、過濾與排序
想要顯示一個數(shù)組的過濾或排序副本匈挖，而不實際改變或重置原始數(shù)據(jù)。在這種情況下康愤，可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性儡循。
<div id="demo">
<input type="text" v-model="searchName">
<ul>
<li v-for="(p, index) in filterPersons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<div>
<button @click="setOrderType(2)">年齡升序</button>
<button @click="setOrderType(1)">年齡降序</button>
<button @click="setOrderType(0)">原本順序</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
searchName: '',
orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
computed: {
// 計算屬性：可用于快速計算視圖（View）中顯示的屬性。這些計算將被緩存征冷，并且只在需要時更新择膝。
filterPersons () {
// 取出相關(guān)數(shù)據(jù)
const {searchName, persons, orderType} = this；
// 最終需要顯示的數(shù)組
let arr资盅；
// 過濾數(shù)組
if(searchName.trim()) {
arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
}
// 排序
if(orderType) {
arr.sort(function (p1, p2) { // 如果返回負數(shù) p1在前调榄，返回正數(shù)P2在前
if(orderType===1) { // 降序
return p2.age-p1.age；
} else { // 升序
return p1.age-p2.age呵扛；
}
})
}
return arr每庆；
}
},
methods: {
setOrderType (orderType) {
this.orderType = orderType；
}
}
})
</script>
