template 模板
<template>
<div class="one">
<u>
<li tag="div" v-for="(item,index) in sort" :key="index">
{{ item.name }} ——{{item.ishas | rever }}
</li>
</u>
<button @click="add">添加一项数据</button>
</div>
</template>
script 代码
<script>
export default {
data(){
return {
items:[
{name:'js',ishas:true},
{name:'javajs',ishas:false},
{name:'html',ishas:true},
{name:'25',ishas:false},
]
}
},
methods:{
add(event){
// 获取到原生dom
console.log(event.target)
// 修改dom的字体颜色 操作style
event.target.style.color='#f00'
// 向数组添加一条数据
this.items.push(
{name:'css3',ishas:false},
)
//修改 原数组中的某一条数据 必须使用Vue.set(原数组,哪个位置,改变后的值)
// 如果这样写:this.items[3] = {name:'css3',ishas:false} 是不会触发更新数组的
//模板写法使用如下写法
this.$set(this.items,1,{
name:'css3',ishas:false
})
}
},
computed:{
//计算属性 进行排序 这里是书名的字符串长度比较后 返回的
sort(){
return this.items.sort((a,b) =>{
return a.name.length < b.name.length
})
}
},
// 过滤器写法
//在模板中是这样写的 {{item.ishas | rever }} 竖线称管道 ,后边可以跟多个过滤方法
//rever方法 默认接收参数 写法:rever(items.ishas)
filters:{
rever(a){
console.log(a) // 其实就是 items.ishas 的值
return a ? '是':'否'
}
}
}
</script>