绑定class,条件渲染,列表过滤,列表排序

发布时间:2024年01月19日

目录???????

绑定class

条件渲染

列表过滤

列表排序

绑定class

<div class="normal" :class="mood" @click="changename">111{{name}}</div>
        <div class="normal" :class="arr">111{{name}}</div>

本来class只能出现一个,但是现在:class代表绑定,后面是表达式就行

dom操作通过vue实例里data来动态绑定

1 如果class后是对象,说明参数个数和名字都确定

2 后是数组,说明动态绑定

3 后是字符串

<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'what',
            mood: 'normal',
            arr: ['happy', 'sad']
        },
        methods: {
            changename() {
                alert('i change')
                this.mood = 'happy'
                // 不用操作dom,只要把与vue关联的数据改了,让vue来操作dom
            }
        }
        // vm.arr.shift()移除数组第一个元素


    })

</script>

条件渲染

v-show后面是表达式,并且是display为none不是真的删除

但是v-if后面表达式,则没的很彻底

<h2 v-if="false">111</h2>
<body>
    <div id="root">
        <h2 v-show="1===3">333{{name}}</h2>

    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'fansi'
        }
    })

</script>

简单交互,点击后n自增

<h2>{{n}}</h2>
<h2 v-show="1===1" @click="n++">{{name}}dianwo</h2>


const vm = new Vue({
        el: '#root',
        data: {
            name: 'fansi',
            n: 0
        }
    })

 <div id="root">
        <h2>{{n}}</h2>
        <button @click="n++">dianwo{{n}}</button>
        <h2 v-show="n===1">react</h2>
        <h2 v-show="n===2">angular</h2>
        <h2 v-show="n===3">vue</h2>

很高的变化频率用v-show

v-else-if

v-else后面别跟条件

如果用v-if,v-else-if,v-else则三者之间不能被打断,即插入别的,不然打断后面的都不奏效

如果想一系列同时出现,用template,不影响结构

<template v-if="1===1">
        <h2>11</h2>
        <h2>12</h2>
        <h2>13</h2>
    </template>

但是template只能配合v-if不能配合v-show

v-for

v-for加在谁身上遍历谁,数组长度多长就多少次

总结:

1 用于展示列表数据

2 v-for="(item,index) in xxx" :key="xxx"

3 可遍历:数组,对象,字符串

<body>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <li v-for="p in persons" :key="p.id">
                <!-- 让每个li都有了唯一的标识? -->
                {{p.name}}-{{p.age}}
                姓名-年龄
            </li>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}--{{p.age}}
                <!-- 这里key其实只要找一个对每次生成的标识都会不一样的东西就行 -->
            </li>
            <!-- v帮你循环,person理解为形参,persons长度是多少就能生成多少个li -->

        </ul>

        <!-- 遍历对象 -->

        <ul>
            <li v-for="p in persons" :key="p.id">
                <!-- 让每个li都有了唯一的标识? -->
                {{p.name}}-{{p.age}}
                姓名-年龄
            </li>
            <li v-for="(value,k) of car" :key="k">
                <!-- 这里in和of都行,先收到的是value -->
                {{k}}--{{value}}
                <!-- 这里key其实只要找一个对每次生成的标识都会不一样的东西就行 -->
            </li>
            <!-- v帮你循环,person理解为形参,persons长度是多少就能生成多少个li -->

        </ul>
        <!-- 测试遍历指定次数 -->
        <ul>
            <li v-for="(a,b) of 5" :key="b">
                <!-- 让每个li都有了唯一的标识? -->
                {{a}}-{{b}}
                <!-- a就是从1开始计数,b从0开始计数但是b就是index索引值 -->
                姓名-年龄
            </li>
            <li v-for="(value,k) of car" :key="k">
                <!-- 这里in和of都行,先收到的是value -->
                {{k}}--{{value}}
                <!-- 这里key其实只要找一个对每次生成的标识都会不一样的东西就行 -->
            </li>
            <!-- v帮你循环,person理解为形参,persons长度是多少就能生成多少个li -->

        </ul>

    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: 'zhangsn', age: 18 },
                { id: '002', name: 'lisi', age: 18 },
                { id: '003', name: 'wangw', age: 20 }
            ],
            car: {
                name: 'aodi',
                price: '70',
                color: 'pink'
            }

        }
    })

</script>

如果key写了该怎么处理:虚拟dom对比算法(diff)

如果没写key该怎么处理:将遍历时候的索引值index自动作为key

react,vue中的key有什么用:
1 虚拟dom中key作用:数据变化时候,vue根据新数据生成新的虚拟dom
如果旧的虚拟dom找到与新的虚拟dom相同的key,如果内容没变直接使用已经转的真实dom(复用dom节点)
-对比key一样但内容不一样,还有就是旧的没找到,直接创新的

将index作为key:如果对数据进行逆序添加,逆序删除等破坏顺序操作,产生没有必要的dom更新,效率低;一旦有输入类dom(input等),就会串行


最好使用能够唯一标识的作为key

列表过滤

1用watch实现:

解决问题关键:过滤条件为空''时候返回的是整个数组

所以用watch完整形式实现,加了immediate能在一开始输入为空时候就执行一次handler

用indexOf表示返回数组里是否包含某个值

const vm = new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 18 },
                    { id: '002', name: '周冬雨', age: 19 },
                    { id: '003', name: '周杰伦', age: 18 }
                ], filpersons: []

            },
            watch: {
                keyWord: {
                    immediate: true,
                    //不等输入已经调用一次handler
                    handler(val) {
                        this.filpersons = this.persons.filter((p) => {
                            // p是每个人的对象
                            return p.name.indexOf(val) !== -1//判断是否包含用indexof,只要不等于-1
                            //filter会返回一个全新数组,persons变了重新解析模板
                        })
                    }
                    // 非常关键点:在一个数组上indexof一个''空字符串出来的是0
                }
            }
        })

新建一个filpersons存过滤后的数组,由于filter函数是通过返回新的数组但对原数组没有修改的方式进行过滤的

indexof意思是找数组里是否包含val并返回index值,只要不是-1就意味着有

2 computed实现(能用computed实现尽量用从他)

出现问题:watch实现能获得用户输入的新旧值,computed可以通过this.keyword来获得

#region 和#endregion在vscode里能让一段代码隐藏

const vm = new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18 },
                { id: '002', name: '周冬雨', age: 19 },
                { id: '003', name: '周杰伦', age: 18 }
            ]

        },
        computed: {
            filpersons() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                    //判断是否包含用indexof,只要不等于-1
                    //                         //filter会返回一个全新数组,persons变了重新解析模板
                })
                // 注意只有监控时候能收到新旧值,新数组值作为filperson的值,直接return
                // 第一个return是计算属性规定的,第二个return是filter规定的,只有返回值才知道filperson是什么
            }
        }


    })

列表排序

注意,对于数组排序:

arr=[1,2,4,3,5,3]
arr.sort((a,b)=>{
return a-b
}
)

这里a和b是获得的前后两个项,现在a-b是升序

 <input type="text" placeholder="input please" v-model="KeyWord">
        <button @click="sortType=2">increase sort</button>
        <button @click="sortType=1">decrease sort</button>
        <button @click="sortType=0">origin</button>
new Vue({
        el: '#root',
        data: {
            keyWord: '',
            sortType: 0,
            persons: [
                { id: '001', name: '马冬梅', age: 18 },
                { id: '002', name: '周冬雨', age: 19 },
                { id: '003', name: '周杰伦', age: 18 }
            ]

        },
        computed: {
            filpersons() {
              const arr =  this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                    //判断是否包含用indexof,只要不等于-1
                    //                         //filter会返回一个全新数组,persons变了重新解析模板
                })
                // 注意只有监控时候能收到新旧值,新数组值作为filperson的值,直接return
                // 第一个return是计算属性规定的,第二个return是filter规定的,只有返回值才知道filperson是什么
                // 先过滤再排序
                if(this.sortType){
                    arr.sort((a,b)=>{
                        return this.sortType===1?p2.age-p1.age: p1.age - p2.age

// sort排序能收到前后两个数据项
                    })
                }
                return arr
            }
        }


    })

</script>

加了两个按钮,data里一个sorttype进行判断,注意computed要返回值

vue里的监控功能

Object.defineProperty(data,'name',{
	get(){
	return data.name
	读溢出,改uncaught
	原因:你想获取值调用get,调用get后又return data.name意味着又要调用get进入死循环,set也是同理
	},
	set(val){

	}
const obs=new Observer(data)创建一个监视的实例对象,监视data中属性变化

function observer(obj){
const keys=object.keys()
	
}

可以用observer进行模拟

通过setter实现监视,要在new vue时候就传入要检测的数据
对象后追加属性,vue默认不响应式处理
why:_data收集data中数据前先加工,给每个数据匹配一个getter和setter

vue.set只能给data某个对象增加属性,不能对vm或者vm根数据对象增加属性
如果要响应式处理:

vue.set(target,propertyname/index,value)
vm.$set(target,propertyname/index,value)
<h2>{{whatt}}</h2>
<div @click="addwhat">123</div>
methods:{
	addwhat(){
	Vue.set(this.whatt,
	'name','guess')
	}
}

vue检测数组中数据
vue修改数组中某个元素实现响应式一定用如下方法:
api:(1)push(),pop(),shift(),unshift(),splice(),sort(),reverse()
(2)vue.set()/vm.$set也能实现响应式第二个参数写索引,第三个写元素

总结:
1 单独改每个属性,因为vue能检测到对象里每个属性
2 将数组中元素单独替换,数据修改成功但vue不能检测到,因为数组元素没有getter和setter,修改数组中元素无法实现响应式
3 更改数组实现响应式,应该调用数组api或者vue.set

文章来源:https://blog.csdn.net/alicca/article/details/135672196
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。