程序员经验分享-hwhale

【学vue跟玩一样】快速搞懂vue渲染

2023-11-16

Vue的渲染分为条件渲染和列表渲染，那究竟什么式渲染呢?

1.条件渲染

1.v-if写法:(1)v-if="表达式"(2)v-else-if="表达式"(3)v-else="表达式"（和我们曾经学过的JavaScript里面的if语句几乎一样）

适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除。

注意: v-if可以和:v-else-if、 v-else起使用， 但要求结构不能被“打断”。

只有当该条件返回值为真时才能进行渲染

<h1 v-if="Padme">小嘎鱼学Vue!</h1>

2.v-show写法: v-show=" 表达式”

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  1. 注意:使用v-if的时，元素可能无法获取到，而使用v-show必定可以获取到。

<body>
    <div class="user">
        <!-- 使用v-show做条件渲染 -->
        <!-- <h2 v-show = 'pand'>欢迎加入{{name}}社区</h2>
        <h2 v-show = '1 === 2'>欢迎加入{{name}}社区</h2> -->
        <!-- 使用v-if做条件渲染 -->
        <!-- <h2 v-if = 'null'>欢迎加入{{name}}社区</h2>  -->
        <h1>当前值为{{n}}</h1>
        <button @click = 'n++'>点我n+1</button>
        <div v-show = 'n ===1'>n为1我就出来</div>
        <div v-show = 'n ===2'>n为2我就出来</div>
        <div v-show = 'n ===3'>n为3我就出来</div>
        <!-- v-if，v-else-if，v-else必须紧挨着 -->
        <div v-if = 'n ===4'>n为4我就出来</div>
        <div v-else-if = 'n ===5'>n为5我就出来</div>
        <div v-else>我就出来</div>
        <!-- template模板标签只能使用v-if -->
        <template v-if = 'n === 1'>
            <h1>你好</h1>
            <h1>你好好</h1>
            <h1>你好好好</h1>
        </template>

    </div>
    <script>
        const vm = new Vue({
            el: '.user',
            data:{
                name: 'Aic山鱼',
                pand:false,
                n:0
            }
        })
    </script>
</body>

2.列表渲染

v-for指令:

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

1.用于展示列表数据

2.语法: v-for=" (item, index) in xx

3可遍历:数组、对象、字符串、指定次数(后两个用的比较少)

 <div id="user">
        <ul>
            <!-- v-for这里可以写俩参数接受值,key代表唯一表示 -->
            <!-- 遍历数组 -->
            <h2>学生信息</h2>
            <li v-for='(p,index) in persons' :key="index">{{p.name}}-{{p.age}}岁----{{index}}</li>
        </ul>
        <ul>
            <!-- 遍历对象 -->
            <h2>汽车信息</h2>
            <li v-for='(value,keys) in car'>{{value}}---{{keys}}</li>
        </ul>
        <ul>
            <!-- 遍历字符串 -->
            <h2>遍历字符串</h2>
            <li v-for='(value,keys) in str'>{{value}}---{{keys}}</li>
            <!-- 遍历指定次数 -->
            <h2>遍历指定次数</h2>
            <li v-for='(value,keys) of 5'>{{value}}---{{keys}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#user',
            data: {
                persons: [
                    { id: 001, name: '山鱼', age: 18 },
                    { id: 002, name: '龙猫', age: 19 },
                    { id: 003, name: '飞飞', age: 20 }
                ],
                car: {
                    name: '宝马',
                    numbers: '25W',
                    type: 'sr1000rr'
                },
                str:'I-LOVE-YOU'
            }
        })
    </script>

2.1v-for与对象

1.可以使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

2.可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

  1. 第三个参数表示位置索引

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

3.key的作用

3.1列表过滤

这里可以使用侦听器实现也可以使用计算属性实现，但是一般都是使用计算属性更简单一些

<body>
    <div id="user">
        <h1>人员列表</h1>
        <input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
        <ul>
            <li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
         const vm = new Vue({
            el: '#user',
            data: {
                // 1.收集用户的输入2.
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 18, sex: '女' },
                    { id: '002', name: '周冬雨', age: 19, sex: '女' },
                    { id: '003', name: '周杰伦', age: 20, sex: '男' },
                    { id: '004', name: '温兆伦', age: 20, sex: '男' },
                ]
            },
            computed: {
                filpersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1;
                    }) 
                }
            }
        })
    </script>

3.2列表排序

列表排序是从列表过滤基础上添加的

<body>
    <div id="user">
        <h1>人员列表</h1>
        <button @click='sortType = 1'>升序</button>
        <button @click='sortType = 2'>降序</button>
        <button @click='sortType = 0'>原序</button>
        <input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
        <ul>
            <li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
        // 使用计算属性实现列表过滤
        const vm = new Vue({
            el: '#user',
            data: {
                // 1.收集用户的输入2.
                keyWord: '',
                sortType: 0,// 0代表原顺序，1代表升序，2代表降序
                persons: [
                    { id: '001', name: '马冬梅', age: 18, sex: '女' },
                    { id: '002', name: '周冬雨', age: 19, sex: '女' },
                    { id: '003', name: '周杰伦', age: 20, 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;
                }
            }
        })
        var arr = [1, 2, 3, 4];
        arr.sort((p1, p2) => {
            return this.sortType === 1 ? p2 - p1 : p1 - p2
        })
    </script>
</body>

3.3vue.set的使用

vue.set的三个参数分别是（给谁添加，添加什么，添加的值是啥）

使用$set也可以实现该功能

局限性：在这里set方法只能给Vue实例对象里面的data内的对象添加属性，不可以直接给data添加属性

3.4数组检测

Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法

包括:

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

点赞：您的赞赏是我前进的动力！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

javascript

前端

Powered by 金山文档

【学vue跟玩一样】快速搞懂vue渲染 的相关文章

随机推荐

  • 14.59 设置表格焦点 JTable.setFocusable

    import java awt FlowLayout import javax swing JFrame import javax swing JScrollPane import javax swing JTable import jav

  • 写一个段Java 代码，可以实现 多表级联修改

    下面是一个简单的 Java 代码示例 实现了多表的级联修改 import java sql Connection import java sql DriverManager import java sql PreparedStatement

  • 2022国赛12：神州路由器交换机配置BGP实例2

    路由器和交换机参数设置 设备 Vlan 端口 IP地址 R1

  • Python Pygame制作简单五子棋游戏（详细代码+解释）

    这里只想简单演示下一个简单的五子棋界面和落子等操作 主要为了后面设计AI对战方便演示 AI算法后面设计吧 最近事太多了 希望本文有助于你制作自己期望的简单的五子棋 一 pygame初始化画布界面 调用pygame库 import pygam

  • 记Mysql ES 数据一致性问题及方案

    业务中使用了mysql和ElasticSearch Mysql作为主仓库 ES作为索引 实际上包含了接近全集的数据 问题 Mysql和Es未做事务 出现了并非场景下 A线程从MySql读 写到ES B线程从mysql ES删除 结果是最终E

  • 一种相位编码信号多普勒补偿方法的Matlab仿真

    参考文献 http d wanfangdata com cn periodical hkldjs200901007 在相位编码信号脉冲压缩技术中 存在着多普勒频率敏感性问题 需要对多普勒频率进行补偿 本文在分析多普勒敏感性原因的基础上 提出

  • mybatis foreach Mapped Statements collection does not contain

    id collection就是集合 open 以某种字符开始 close 以某种字符结尾 index 遍历的索引 item 集合中的每一项 separator 以某种字符分隔 在使用foreach的时候最关键的也是最容易出错的就是colle

  • 升级 Node.js 版本的步骤

    node 已经成为前端开发 分不开的工具了 但node的使用除了npm i 等命令 还是有很多不清楚 不常用的 特别是新手 可能经常遇到这样的问题 问题一 明明我的命令是按照前端教的输入的 为什么启动不了我的项目 问题二 我要负责好几个项目

  • route add添加静态路由

    方法一 添加路由 route add net 192 168 0 0 24 gw 192 168 0 1 route add host 192 168 1 1 dev 192 168 0 1 删除路由 route del net 192 1

  • java map获取第一个值_HashMap在Java中怎么工作

    前言 大多数JAVA开发人员都在使用Maps 尤其是HashMaps HashMap是一种简单并且有效的存取数据的方式 但是有多少人知道HashMap内部是如何工作的么 前段时间 为了深入理解这个基础的数据结构 我阅读了 java util

  • 新手小白idea的配置2.1.1讲

    3 IDEA配置 idea的jdk的配置 打开IDEA集成开发环境工具 点击 File Project Structure 如下图 在打开的页面中 选择SDKs属性 并点击中间的加号 选择JDK 如下图 在打开的页面中 选择本地计算机中已经

  • 数据分析理论

    文章目录 一 数据分析的概念 二 数据分析的过程 1 问题定义 2 数据采集 3 数据预处理 4 数据探索和数据可视化 5 预测模型的创建和选择 6 模型评估 7 部署 三 数据分析的作用 一 数据分析的概念 数据分析是指用适当的统计分析方

  • Uniapp 截图或者生成海报的方法

    需求 uniapp移动端需要生成一张当前界面的海报 方案一 类似于手机按钮截图效果 实现代码如下 doSaveScreen let this this uni showLoading 加载框 title 保存中 mask true var

  • STM32F103C8T6详细引脚表

    今天准备画一个STM32F103C8T6的最小系统板 就去STM32F103C8的数据手册查看了一下相应的引脚 因为数据手册里面的引脚表有中容量的多种封装描述 看上去比较麻烦 我就单独做了一个LQFP48脚的引脚表 方便后期自己画封装 就图

  • Spring+Mybatis 查询所有数据时发生异常：org.apache.ibatis.reflection.ReflectionException: There is no getter for

    Spring Mybatis框架整合时 根据条件查询数据 发生异常 Caused by org apache ibatis reflection ReflectionException There is no getter for prop

  • JavaScript分支语句总结

    注 js变量算术运算符和逻辑运算符知识点的补充 1 的区别 表示值相等 表示值相等 数据类型也必须相等 案例 的区别 表示值相等 表示值相等 数据类型也必须相等 var x 10 var y 10 console log x y true

  • 图像降质

    1 逆滤波和维纳滤波 附Matlab完整代码 https blog csdn net weixin 41730407 article details 80455612 2 python 运动模糊 退化模型 点扩散函数 逆滤波与维纳滤波 ht

  • GG-CNN代码学习

    文章目录 1 源码网址 https github com dougsm ggcnn 2 数据集格式转化 下载后的康奈尔数据集 解压完之后里面的格式 里面的 tiff图像通过 txt文件转化得到 python m utils dataset

  • layui 数据表格 sort排序，filter过滤——soulTable

    1 效果图 2 页面代码 div class fp table style margin left 0 5 width 86 table style margin bottom 0px table div 3 js代码 引入扩展组件 lay

  • 【学vue跟玩一样】快速搞懂vue渲染

    Vue的渲染分为条件渲染和列表渲染 那究竟什么式渲染呢 1 条件渲染 1 v if写法 1 v if 表达式 2 v else if 表达式 3 v else 表达式 和我们曾经学过的JavaScript里面的if语句几乎一样 适用于 切换

热门标签

Powered by Hwhale