vue 获取dom 元素 ，过滤器，排序，$set 更新数组元素

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>