Vue（三）-- class与style绑定、条件渲染、列表渲染、列表的搜索和排序
目录
1.class与style绑定
- 理解
在应用界面中，某个（些）元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
--1.1class绑定，:class='xxx'
- xxx是字符串
<p :class="a">Hello World</p> - xxx是对象
<p :class="{aClass:isA , bClass:isB}">Hello World</p>
isA和isB是布尔值
- xxx是数组
<p :class="['aClass','cClass']">Hello World</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.aClass {
color: red;
}
.bClass {
color: blue;
}
</style>
</head>
<body>
<div id="demo">
<h2></h2>
<p :class="a">Hello World</p>
<h2></h2>
<button @click="update">btn</button>
</div>
<script type="text/javascript">
var app = new Vue( {
el: '#demo',
data: {
a: 'aClass'
},
methods: {
update() {
this.a = 'bClass'
}
}
})
</script>
</body>
</html>
--1.2style绑定
:style="{color:activeColor,fontSize:fontSize+'px'}"
其中的activeColor/fontSize是data属性,可以改变
2.条件渲染
--2.1v-if和v-else
<p v-if="ok">成功了</p>
<p v-else="true">失败</p>
--2.2v-show
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
--2.3比较v-if与v-show
- v-if通过删除和增加标签来进行切换，v-show通过dispaly:none来隐藏标签
- 如果需要频繁切换v-show比较好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p v-if="ok">成功了</p>
<p v-else="true">失败</p>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button type="button" @click="ok=!ok"></button>
</div>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
ok:false
}
})
</script>
</body>
</html>
3.列表渲染
- vue本身只是监视了persons的改变，没有监视数组内部数据的改变
- Vue重写了数组中一系列改变数组内部数据的方法（先调用并实现原生代码，再更新界面）
数组内部改变，界面自动改变
--3.1v-for遍历数组
<li v-for="(p,index) in persons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
---<button @click="deleteP">删除</button>
---<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
</li>
练习
--3.2v-for遍历对象
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}---{{key}}
</li>
--练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<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">删除</button>
---<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
</li>
</ul>
<h2>测试：v-for 遍历对象</h2>
<ul>
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}---{{key}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [ //vue本身只是监视了person的改变，没有监视数组内部数据的改变
{
name: 'Tom',
age: 18
},
{
name: 'Jack',
age: 16
},
{
name: 'Bon',
age: 19
},
{
name: 'Rose',
age: 14
},
]
},
methods: {
deleteP(index) {
//删除persons中指定index的p
this.persons.splice(index, 1)
},
updateP(index, newP) {
//没有改变persons本身。数组内部发生变化，但并没有调用变异方法，不会更新界面
this.persons.splice(index, 1, newP)
}
}
})
</script>
</body>
</html>
--3.3为什么要使用:key
参考知乎问题(https://www.zhihu.com/question/61064119)
--3.4变更方法
- Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
----3.4.1splice()
splice方法很强大，可实现数组的增删改
- 增
splice(index,0,newP)//idnex:数组索引，newP：新的内容，0：代表增加 - 删除
splice(index,1) - 改
splice(index,1,newP)
4.列表的搜索和排序
--4.1代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
<input type="text" v-model="searchName"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
searchName:'',
orderType: 0,//0代表原本，1代表升序，2代表降序
persons: [ //vue本身只是监视了person的改变，没有监视数组内部数据的改变
{
name: 'Tom',
age: 18
},
{
name: 'Jack',
age: 16
},
{
name: 'Bon',
age: 19
},
{
name: 'Rose',
age: 14
},
]
},
computed:{
filterPersons(){
//取出相关数据
const {searchName,persons}=this
//最终需要显示的数组
let fPersons;
//对persons进行过滤
fPersons = persons.filter(p=>p.name.indexOf(searchName)>=0)
orderType=this.orderType
//排序
if(orderType!==0){
fPersons.sort(function(p1,p2){
if(orderType===2){
console.log(p1.name+" down"+p2.name)
return p2.age-p1.age
}else{
console.log(p1.name+" up "+p2.name)
return p1.age-p2.age
}
})
}
return fPersons
}
},
methods:{
setOrderType(orderType){
this.orderType = orderType
}
}
})
</script>
</body>
</html>
