Vue2(三):绑定样式、条件渲染、列表渲染、列表过滤、列表排序

1.绑定样式

1.1绑定class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
数组写法适用于:要绑定多个样式,但是不确定绑定哪几个,就写成数组,省的一个一个绑定。
对象写法适用于:要绑定多个样式,而且要动态决定用不用,这里面可以写一些判断的逻辑。

<div id="root">
    <!--   1. 绑定class样式--字符串写法,适用于样式的类名不确定,需要动态指定-->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

    <!--   2. 绑定class样式--数组写法,适用于要绑定的样式个数不确定,名字也不确定-->
    <div class="basic" :class="classArr" @click="removeStyle3">{{name}}</div><br>

    <!--   3. 绑定class样式--对象写法,适用于要绑定的样式个数确定,名字也确定,要动态决定用不用-->
    <div class="basic" :class="classObj">{{name}}</div><br>
    <button @click="useStyle1">点击添加样式1</button>
    <button @click="useStyle2">点击添加样式2</button>

</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            mood: 'normal',
            classArr: ['style1', 'style2', 'style3'],
            classObj: {
                style1: false,
                style2: false
            }
        },
        methods: {
            changeMood() {
                // this.mood = 'happy';
                //点击实现随机切换样式
                const arr = ['happy', 'sad', 'normal'];
                const index = Math.floor(Math.random() * 3);  //获取0-3之间的整数不包括3
                this.mood = arr[index];
            },
            //点击去掉style3样式
            removeStyle3() {
                this.classArr.pop();
            },
            //点击添加样式1
            useStyle1() {
                this.classObj.style1 = true;
                // this.classObj.style2 = true;
            },
            //点击添加样式2
            useStyle2() {
                // this.classObj.style1 = true;
                this.classObj.style2 = true;
            }
        }
    })
</script>

2.绑定style样式

:style="{fontSize: xxx + 'px'}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

<!--    绑定style样式--对象写法-->
<div class="basic" :class="classArr" :style="styleObj" >{{name}}</div><br>
<!--    绑定style样式--数组写法(非常不常用)-->
<div class="basic" :class="classArr" :style="[styleObj,styleObj2]" >{{name}}</div>
<script>
new Vue({
    el:'#root',
    data: {
        name: 'zzy',
        styleObj:{
        	//驼峰命名法
            fontSize:'50px',
            color:'red'
        },
        styleObj2:{
     	   //驼峰命名法
            backgroundColor:'green'
        }
   }
})
</script>

2.条件渲染

2.1v-show

写法:v-show=“表达式”
适用于:切换频率较高的场景。(不会动DOM树,只是隐藏,相当于添加display:none)
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。这是因为v-if会一不小心把标签直接从页面上干掉,而v-show不会干掉,只会隐藏。

2.2v-if

写法:
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于:切换频率较低的场景。(因为会动DOM树,节点删来删去不太好)
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

<!-- 准备好一个容器 -->
<div id="root">

    <!-- 1.v-show="false" => 相当于display:none -->
    <h2 v-show="false">我的名字叫{{name}}</h2>
    <h2 v-show="1 === 3">我的名字叫{{name}}</h2>
    <!-- 等价于<h2 style="display: none;">我的名字叫{{name}}</h2> -->

    <!-- 2.v-if="false" => 彻底删除标签了 -->
    <h2 v-if="false">我的名字叫{{name}}</h2>
    <h2 v-if="1 === 3">我的名字叫{{name}}</h2>


    <!-- 实现功能:随着n递增展示不同的div -->
    <h2>{{n}}</h2>
    <button v-on:click="n++">点击n+1</button>

    <!-- 这里的v-if,v-else-if,v-else和基础js里的一样儿 -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>zzy.js</div>

    <!-- v-if和template的配合使用(v-show不行)
    template不会影响页面结构,页面运行后会自动去掉,但是可以配合v-if控制多个元素整体显示
    而且不会影响css拿节点-->
    <template v-if="n === 1">
        <div>zzy1</div>
        <div>zzy2</div>
        <div>zzy3</div>
    </template>

</div>

<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            n: 0
        }
    })
</script>

3.列表渲染

3.1v-for

1、用于展示列表数据
2、语法:v-for=“(item, index) in xxx” :key=“yyy”,其中xxx是遍历的目标,yyy是唯一的索引,用于区分每个嘎达
3、可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
4、遍历数组的话,index是索引值(唯一),p是数组每个元素
5、遍历对象的话,index就是属性名(唯一),p是属性值

<div id="root">
        <h2>人员列表</h2>
        <!-- 遍历数组(用的多) -->
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {{value}}-{{key}}
            </li>
        </ul>

        <!-- 遍历字符串(用的少) -->
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>

        <!-- 遍历指定次数(用的少) -->
        <ul>
            <li v-for="(num,index) in 5" :key="index">
                {{num}}-{{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    persons: [
                        { id: 001, name: '张三', age: 19 },
                        { id: 002, name: '李四', age: 18 },
                        { id: 003, name: '王五', age: 20 },
                    ],
                    car: {
                        name: '兰博基尼',
                        price: '一百万',
                        color: 'blue'
                    },
                    str: 'hello'
                }
            }
        })

3.2key的作用与原理(很关键)

key可以有三种情况:写唯一标识、写index、不写。其中唯一标识最合适,如果不写会默认是写index

面试题:react、vue中的key有什么作用?(key的内部原理)

1、 虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较(diff算法),比较规则如下:

2、对比规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
① 若虚拟DOM中内容没变, 直接使用之前的真实DOM!
② 若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。

3、 用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 => 界面效果没问题, 但效率低。
(2) 如果结构中还包含输入类的DOM:
会产生错误DOM更新 => 界面有问题。

4、 开发中如何选择key?:
(1)最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。

用一个案例来说明问题:
我要给数组头部添加一个人:

   <!-- 准备好一个容器 -->
    <div id="root">
        <h1>人员列表</h1>
        <button @click="add">点击添加老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                <!-- 遍历数组的话,index是索引值,p是数组每个元素 -->
                {{p.name}}----{{p.age}}----{{index}}
                <input type="text">
            </li>
        </ul>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: 001, name: '张三', age: 23 },
                    { id: 002, name: '李四', age: 18 },
                    { id: 003, name: '王五', age: 10 }
                ]
            },
            methods: {
                add() {
                    const p = { id: 004, name: '老刘', age: 90 };
                    this.persons.unshift(p);
                }
            },
        })
    </script>

遍历列表时key的作用(index作为key):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

遍历列表时key的作用(唯一标识作为key):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.列表过滤:实现[模糊查询]

4.1使用watch瑕疵实现

使用watch就可以避免上述问题,上面的筛选算法正确写法应该是用includs或者indexOf来判断当前keyword的值是否在name字符串中,这样就可以避免输入框为空值也不显示所有信息的问题。

是有个瑕疵:handler函数必须在keyword被改变时才执行,也就是说页面上来还是没有信息的,必须手动输入个东西再删掉(手动改变keyword),才能执行handler函数,才能显示所有人物的信息,所以必须加个属性immediate: true,才能默认初始化先调用handler,这样就能实现上来就显示所有人物的信息(最开始keyword=''

<!-- 准备好一个容器 -->
<div id="root">
    <h1>人员列表</h1>
       <!-- <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="search"> -->
       <input type="text" placeholder="请输入关键字" v-model="keyword">
    <ul>
        <li v-for="(p,index) in newPersons" :key="p.id">
            {{p.name}}----{{p.age}}----{{p.sex}}
        </li>
    </ul>
</div>

<script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyword: '',
                persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
                 newPersons: []
            },
            watch: {
                keyword: {
                    //页面上来由于newPersons是空,不会显示数据,想要让页面初始化就显示所有人,就要加个immediate: true
                    //这样就可以让handler函数初始化时先调用一次,由于开始keyword=''
                    // 而字符串里都包含空字符串,就可以先筛选出来,初始化所有人物信息
                    immediate: true,
                    handler(newVal, oldVal) {
                        this.newPersons = this.persons.filter((ele) => {
                            //判断keyword变化后的新值在不在每个对象的name中,并返回一个新的数组
                            return ele.name.includes(newVal);
                            //有个点要注意,字符串里面是有空字符串的
                        });
                    }
                }

        })
</script>

4.2使用computed完美实现

使用计算属性可以解决watch中的一些繁琐写法,也不用在data中再新定义一个空数组newPersons。

计算属性和监视属性最大的区别就是handler函数是被监视的属性更改时执行,而get是属性被读取时就执行,所以页面加载时newPersons被读取直接就调用get函数返回了一个被筛选后的新数组(条件是name包含空字符串),之后每次keyword改动都会导致Vue模板重新解析,get重新调用,不错

<!-- 准备好一个容器 -->
<div id="root">
    <h1>人员列表</h1>
    <!-- <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="search"> -->
    <input type="text" placeholder="请输入关键字" v-model="keyword">
    <ul>
        <li v-for="(p,index) in newPersons" :key="p.id">
            {{p.name}}----{{p.age}}----{{p.sex}}
        </li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: '#root',
        data: {
            keyword: '',
            persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
            //newPersons: []
        },
        computed: {
            newPersons: {
                get() {
                    return this.persons.filter((ele) => {
                        return ele.name.includes(this.keyword);
                    })
                }
            }
        }
    })
</script>

5.列表排序

先过滤,再排序

首先定义一个sortType属性来判断排序的种类,然后在计算属性里做一个判断。
注意这里仔细理解理解数组的sort方法,很奇怪。

这个案例再次体现出计算属性的强大之处,只要get里用到的数据(keyword,sortType)发生改变,get都会重新执行,模板都会重新解析,这个业务逻辑就实现了

<div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <!-- 遍历数组(用的多) -->
        <ul>
            <li v-for="p in filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <!-- 用computed实现 -->
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    sortType: 0, //0代表原顺序   1代表降序   2代表升序   
                    persons: [
                        { id: 001, name: '马冬梅', age: 19, sex: '女' },
                        { id: 002, name: '周冬雨', age: 18, sex: '女' },
                        { id: 003, name: '周杰伦', age: 21, sex: '男' },
                        { id: 004, name: '温兆伦', age: 20, sex: '男' },
                    ],
                }
            },
            computed: {
                filPersons() {
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    // 判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
               return p.name.indexOf(this.keyWord) !== -1
                })
                // 判断一下是否需要排序
                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                    })
                }
                return arr
            }
        }
    })
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值