class与style的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 20px;
}
</style>
</head>
<body>
<div id="demo">
<h2>1. class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx字符串</p>
<!--true false 里面是布尔值-->
<p :class="{aClass:isA, bClass:isB}">xxx是对象</p>
<p :class="['aClass', 'bClass']">xxx是对象</p>
<h2>2. style绑定</h2>
<p :style="{color:activeColor, fontSize:fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
a:'aClass',
isA:true,
isB:false,
activeColor:'red',
fontSize:20 + 'px'
},
methods:{
update(){
this.a = 'bClass'
this.isA = false
this.isB = true
this.activeColor = 'green'
this.fontSize = 40 + 'px'
}
}
})
</script>
</body>
</html>
条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 条件渲染指令 都是true才显示
v-if
v-else
v-show
2. 比较v-if与v-show
如果需要频繁切换 v-show 较好
v-if删除标签，看不到它，没了
v-show设置了display为none，还在
-->
<div id="demo">
<p v-if="ok">成功</p>
<p v-else>失败</p> <!--不写 相当于相反-->
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
ok:true
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p , index) in persons " :key="index"> <!--一旦有v-for最好给一个key-->
{{index}} ------ {{p.name}} ------- {{p.age}}
---- <button @click="deleteP(index)">删除</button>
---- <button @click="updateP(index, {name:'ZZ',age:21})">更新</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" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
persons:[//Vue本身只是监视了persons的改变，没有监视数组内部数据的改变
{name: 'Tom' , age: '18'},
{name: 'Amy' , age: '11'},
{name: 'DaMing' , age: '19'},
{name: 'Rose' , age: '28'}
]
},
methods:{
deleteP(index) {
// Vue重写了数组中的一系列改变数组内部数据的方法，
// 第一步使用原生的方法，第二步更新界面
//这样就实现了数组内部改变，界面自动变化
this.persons.splice(index , 1)
},
updateP(index, newP) {
console.log('1')
// this.persons[index] = newP
// 印证上面的话，person指向的对象没变，只是内部数据变化了，
// 但是并没有调用变异方法，vue不会更新界面
this.persons.splice(index, 1 ,newP)
}
}
})
</script>
</body>
</html>
列表过滤，列表排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 列表过滤
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>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
searchName:'',
orderType:0,//0代表原本顺，1代表升序，2代表降序
persons:[//Vue本身只是监视了persons的改变，没有监视数组内部数据的改变
{name: 'Tom' , age: '18'},
{name: 'Amy' , age: '11'},
{name: 'DaMing' , age: '19'},
{name: 'Rose' , age: '28'}
]
},
computed:{
filterPersons(){
// 在computed属性对象中定义计算属性的方法
//初始化显示时执行，相关的data属性数据发生改变时执行 怕忘了
console.log('fullName1')
//取出相关数据
const {searchName,persons,orderType} = this
//最终需要显示的数组
let fpersons
//这里写了两种写法，都可以，第一种方便理解，因为不了解filter
//这里会在下方引用别人的代码解释一下filter
//对persons进行过滤
// fpersons = persons.filter(p => {
// return p.name.indexOf(searchName)!==-1
// })
// return fpersons
//indexOf满足就返回0，不满足就返回-1
// 这里疑惑一开始为什么会显示，因为一开始空串，查了下资料
// 源码里有个条件是如果字符串长度等于0，返回0
// （没有为什么，人家就说这样定义的）
fpersons = persons.filter(x => x.name.indexOf(searchName)!==-1)
//排序
if (orderType!==0){
fpersons.sort(function (p1, p2) {
//如果返回负数，p1在前，返回正数，p2在前 这个记住就好了，主要是排序
//p1-->p2就是升序 p2-->p1就是降序
//两种情况
if (orderType === 2){
return p2.age - p1.age
}else{
return p1.age - p2.age
}
})
}
return fpersons
}
},
methods:{
// 这里收到值，然后改变data值，然后UI那位data变了，所以就要执行computed
setOrderType(orderType) {
this.orderType = orderType
}
}
})
</script>
</body>
</html>
解释filter
filter方法可以遍历数组
filter方法的参数是函数
filter方法函数有形参v
形参v指的是数组中每个元素
filter方法中函数有返回值(把符合条件的元素放在一个新数组中返回)
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
示例：
const arr = [1,2,3].filter((v)= > {
console.log(v); //输出为1，2，3
return v>1;
})
console.log(arr); //输出为[2,3];
sort（）
var array = [4, 2, 5, 3, 1];
function compare(a, b) {
console.log(a,b);
return a - b;
}
array.sort(compare);
输出结果：
第一行输出2 4，2-4<0，2移到4前面，数组为[2,4,5,3,1]
第二行输出5 2，5-2>0，数组不变
第三行输出5 4，5-4>0，数组不变
根据前三行的输出规律，接下来输出依次应该是3 2，3 4，3 5，然而第四行却直接输出了3 4，这是因为算法使用了二分法，提高比较效率，3-4<0，3移到4前面，数组为[2,3,4,5,1]。
由于3<4，所以第五行直接比较3 2，3-2>0，数组不变
第六行，依旧按照二分法，从1 4，开始比较，1-4<0，1移到4前面，数组为[2,3,1,4,5]
同理，第七行结果为[2,1,3,4,5]，第八行结果为[1,2,3,4,5]，排序完毕。
扫一扫
32万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
