绑定css,style样式,V-if和V-show渲染,列表渲染,列表过滤,列表排序

wwnewnewnew

于 2023-09-12 00:03:00 发布

阅读量401

点赞数

分类专栏： Vue.js 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_45994446/article/details/132761116

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.绑定样式

1.绑定css样式

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

<!-- 准备容器 -->
    <div class="root">
        <!-- :class='mood'需要变化的样式绑定  字符串写法，适用于样式的类名不确定，点击会变，需要动态指定 -->
        <div class="basic" :class="mood" @click="changesMood">{{name}}</div><br>

        <!-- :class='classArr'  数组写法，适用于使用的样式个数和名字都不确定-->
        <div class="basic" :class="classArr">{{name}}</div><br>

        <!-- :class='classObj'  对象写法，适用于使用的样式个数和名字都确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div><br>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        // 创建VUe实例
        new Vue({
            el: '.root',
            data: {
                name: '哈哈',
                mood: 'normal',
                classArr: ['study1', 'study2', 'study3'],
                classObj: {
                    study1: false,
                    study2: false,
                }
            },
            methods: {
                changesMood() {
                    // this.mood = 'happy'//换成happy
                    // 随机生成心情
                    const arr = ['happy', 'sad', 'normal']
                    // 随机生成下坐标
                    const index = Math.floor(Math.random() * 3)//3为arr.length
                    this.mood = arr[index]
                }
            }
        })

    </script>

2.绑定style样式

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

   <div class="root">       
        <!-- 绑定style样式 -->
        <!-- <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div> -->
        <!-- 对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div><br>
        <!-- 数组写法 -->
        <div class="basic" :style=[styleObj,styleObj2]>{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        // 创建VUe实例
        new Vue({
            el: '.root',
            data: {
                name: '哈哈',
                mood: 'normal',
                // fsize: 50
                styleObj: {
                    fontSize: '50px'
                },
                styleObj2: {
                    color: 'red',
                    backgroundColor: 'grey'
                }
            },
        
        })

    </script>

二.条件渲染

  <h2>当前n值为：{{n}}</h2>
 <button @click="n++">点击n+1</button>
<script type="text/javascript">
        Vue.config.productionTip = false
        // 创建VUe实例
        const vm = new Vue({
            el: '.root',
            data: {
                name: '多云',
                    n: '0'
            },
        })
    </script>

1.v-show渲染

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

<h2 v-show="false">天气{{name}}</h2>
 <h2 v-show="1===1">天气{{name}}</h2>

2.v-if渲染

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

<!-- v-if做条件渲染  直接可以让第一个h2消失-->
    <h2 v-if="false">天气{{name}}</h2>
     <h2 v-if="1===1">天气{{name}}</h2>

<div v-if="n===1">哈哈</div>
<div v-if="n===2">嘻嘻</div>
 <div v-if="n===3">略略</div>

   <!-- 满足第一条就不会在看另外的了 四个div中间不能有其他div -->
        <div v-if="n===1">哈哈</div>
        <div v-else-if="n===2">嘻嘻</div>
        <div v-else-if="n===3">略略</div>
        <!-- n不等于1，2，3时则等于其他 -->
        <div v-else=>其他</div>

v-if和template可以配合使用，但不能和v-show使用，因为 template不会破坏结构，运行时template直接消失

  <template v-if="n===1">
            <h2>你好</h2>
            <h2>北京</h2>
            <h2>欢迎你</h2>
        </template>

三.列表渲染

1.基本列表

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

 <!-- 准备容器 -->
    <div class="root">
        <h2>人员列表</h2>
        <!-- 遍历数组(重要) 一般不用for in -->
        <ul>
            <!-- p是形参 index为索引值  :key使每一个人有账号,保证每个key不同-->
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,ke) of car" :key="ke">
                {{value}}-{{ke}}
            </li>
        </ul>

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

        <!-- 遍历指定次数 -->
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{number}}-{{index}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产者开发者提示。
        Vue.config.productionTip = false
        // 创建VUe实例
        new Vue({
            el: '.root',//建立容器与实例之间关系 el指定当前Vue实例为哪个容器服务 
            data: {
                persons: [
                    { id: '001', name: 'haha', age: 20 },
                    { id: '002', name: 'lulu', age: 22 },
                    { id: '003', name: 'yaya', age: 23 }
                ],
                car: {
                    name: '宝马8x',
                    price: '80万',
                    color: '红色'
                },
                str: 'hello'
            }
        })
    </script>

2.key的作用与原理（面试重点）

面试题：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（input框）：会产生错误DOM更新 => 界面有问题。

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

比如给数组头部添加一个对象：

 <!-- 准备容器 -->
    <div class="root">
        <h2>人员列表</h2>
        <button @click.once="add">添加一个人</button>
        <ul>
            <!-- key在vue生成真实Dom时将Key弄消失 -->
            <!-- 此时用index有问题 -->
            <li v-for="(p,index) of persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产者开发者提示。
        Vue.config.productionTip = false
        // 创建VUe实例
        new Vue({
            el: '.root',//建立容器与实例之间关系 el指定当前Vue实例为哪个容器服务 
            data: {
                persons: [
                    { id: '001', name: 'haha', age: 20 },
                    { id: '002', name: 'lulu', age: 22 },
                    { id: '003', name: 'yaya', age: 23 }
                ]
            },
            methods: {
                add() {
                    const p = { id: '004', name: 'huahua', age: '19' }
                    this.persons.unshift(p)
                }
            }
        })
    </script>

index作为key时的作用：

key为id时的作用：

此时在旧虚拟DOM中找不到key为004的老刘，直接将其转换为真实DOM，其余在旧虚拟DOM中能找到相应key的直接复用，提高效率。

3.列表过滤实现模糊查询

filter过滤掉不想要的，留下想要的

3.1使用watch监视列表过滤

首先v-model设置keyWord使vue接受用户输入的关键字,然后监控用户输入的关键词,使用filter过滤，将keyWord与数组内名字对比过滤，使用includs或者indexOf来判断当前keyword的值是否在name字符串中，将indexOf不等于-1的值添加到空数组中，由v-for遍历输出

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

<!-- 准备容器 -->
    <div class="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model='keyWord'>
        <ul>
            <!-- 将过滤完符合条件的名字生成数组，则遍历该数组 -->
            <li v-for="(p,index) of filPersons" :key="p.index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产者开发者提示。
        Vue.config.productionTip = false
        // 创建VUe实例
        new Vue({
            el: '.root',//建立容器与实例之间关系 el指定当前Vue实例为哪个容器服务 
            data: {
                // 收集用户输入
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 20, sex: '女' },
                    { id: '002', name: '周冬雨', age: 22, sex: '女' },
                    { id: '003', name: '周杰伦', age: 23, sex: '男' },
                    { id: '004', name: '温啦伦', age: 30, sex: '男' }
                ],
                filPersons: []
            },
            // 使用watch监视实现
            watch: {
                keyWord: {
                    immediate: true,
                    //val为用户输入的值 为keyword传来的形参
                    handler(val) {
                        // 接收到keyWord后应将keyWord与数组内名字对比过滤 然后放入空数组
                        this.filPersons = this.persons.filter((p) => {
                            // 返回名字内包括用户输入的关键字的name，即indexof不等于-1的，等于-1即不包括关键字的,indexOf的Of要大写
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })
    </script>

3.2使用Computed计算属性列表过滤

使用计算属性只要keyWord有变化便会重新调用get方法,vue重新解析filPersons

 new Vue({
            el: '.root',//建立容器与实例之间关系 el指定当前Vue实例为哪个容器服务
            data: {
                // 收集用户输入
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 20, sex: '女' },
                    { id: '002', name: '周冬雨', age: 22, sex: '女' },
                    { id: '003', name: '周杰伦', age: 23, sex: '男' },
                    { id: '004', name: '温啦伦', age: 30, sex: '男' }
                ]
            },
            computed: {
                filPersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })

4.列表排序

过滤排序不分家,过滤后判断是否要排列,首先定义一个sortType属性来判断排序的种类,

计算属性中将其过滤的数组进行指定排序sort(),升序排列就是p2-p1,降序就是p1-p2;

 <!-- 准备容器 -->
    <div class="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,index) of filPersons" :key="p.index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产者开发者提示。
        Vue.config.productionTip = false

        // 用computed实现
        new Vue({
            el: '.root',//建立容器与实例之间关系 el指定当前Vue实例为哪个容器服务
            data: {
                // 收集用户输入
                keyWord: '',
                // 0为原顺序，1为降序，2为升序
                sortType: 0,
                persons: [
                    { id: '001', name: '马冬梅', age: 20, sex: '女' },
                    { id: '002', name: '周冬雨', age: 22, sex: '女' },
                    { id: '003', name: '周杰伦', age: 23, sex: '男' },
                    { id: '004', name: '温啦伦', age: 30, 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>

wwnewnewnew

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绑定css,style样式,V-if和V-show渲染,列表渲染,列表过滤,列表排序

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

扫一扫