一、class与style绑定
- 1.在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定:
class='xxx'
xxx是字符串: 'classA'
xxx是对象: {classA:isA, classB: isB}
xxx是数组: ['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是数组</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的区别
v-if 隐藏是通过将标签移除；v-show是通过style display=none,标签还存在；v-if还需要创建标签才可以显示，标签过多的话影响速度。
<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指令根据一组数组的选项列表进行渲染 - 注:1.
v-for是1.0之后的版本才有的，1.0之前的版本用v-repeat；
2.在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引；
3.vue本身只是监视数组的改变，没有监视数组内部数据的改变，因此vue重写了数组中的一系列改变数组内部结构数据的方法，即变异方法，如splice、push等，可实现--原生功能、更新界面
1、替换与删除
<!--
1. 列表显示
数组: v-for / index
对象: v-for / key
2. 列表的更新显示
删除item
替换item
-->
<div id="demo">
<h2>测试: v-for 遍历数组</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本身只是监视persons的改变，没有监视数组内部数据的改变
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
methods: {
deleteP (index) {
// 删除persons中指定index的内容
this.persons.splice(index, 1)
// 此处splice，调用了不是原生数组的splice(), 而是一个vue变异方法，功能： // 1. 调用原生的数组的对应方法 // 2. 更新界面
},
updateP (index, newP) {
console.log('updateP', index, newP)
// this.persons[index] = newP // 并没有改变persons本身，数组内部发生改变，并没有调用变异方法
this.persons.splice(index, 1, newP)
// this.persons = [] //改变person
},
addP (newP) {
this.persons.push(newP)
}
}
})
</script>
2、过滤与排序
想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
<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 () {
// 取出相关数据
const {searchName, persons, orderType} = this；
// 最终需要显示的数组
let arr；
// 过滤数组
if(searchName.trim()) {
arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
}
// 排序
if(orderType) {
arr.sort(function (p1, p2) { // 如果返回负数 p1在前，返回正数P2在前
if(orderType===1) { // 降序
return p2.age-p1.age；
} else { // 升序
return p1.age-p2.age；
}
})
}
return arr；
}
},
methods: {
setOrderType (orderType) {
this.orderType = orderType；
}
}
})
</script>
