Vue笔记-Day03-2（条件渲染|列表渲染）

最新推荐文章于 2024-10-18 17:49:11 发布
最新推荐文章于 2024-10-18 17:49:11 发布
阅读量242 收藏
点赞数
分类专栏： vue\ 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57155307/article/details/122103181
版权

3.4 条件渲染：

1.v-if :
写法：
v-if;
v-else-if;
v-else;
适用于切换频率较低的场景。
特点：不展示的dom元素直接删除。
注意：v-if与v-else-if，v-else可以一起使用，但是要求结构不能被打断，即必须连续的使用。

2.v-show:
写法：
v-show;
适用于：切换频率较高的场景；
特点：不展示的dom元素不删除，而是使用display:none来隐藏；

3.备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到，因为v-show只是隐藏，元素还是存在的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js" type="text/javascript"></script>
    <title>条件渲染</title>
</head>

<body>

    <div class="root">
<!--        show or hide    3 choose-->
        <h1 v-show="a">welcome study {{name}} 1</h1>
        <h1 v-show="true">welcome study {{name}} 2</h1>
        <h1 v-show="1 === 1">welcome study {{name}} 3</h1>


        <h1 v-if="false">welcome study {{name}} 4</h1>

        <h2>n = {{n}}</h2>
        <button @click="addn">click to add n</button>

        <div v-show="n === 1">Jsp</div>
        <div v-show="n === 2">Angular</div>
        <div v-show="n === 3">Vue</div>
<!--   v-if  v-else  v-else-if   -->
        <div v-if="n === 1">Jsp</div>
        <div v-else-if="n === 2">Angular</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>default</div>
<!--   v-if与template的配合使用   -->
        <template v-if=" n === 1">
            <h2>aa</h2>
            <h2>bb</h2>
            <h2>cc</h2>
        </template>


    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //Vue instance
        const x = new Vue({
            // el:document.getElementById('root') the same
            el:".root",
            data:{
                name:'Vue2',
                a:true,
                n:0,
            },
            methods:{
                addn(){
                    this.n++;
                }
            }
        })


    </script>
</body>

</html>

3.5 列表渲染：

v-for:
1.可以使用v-for指令展示列表数据
2.语法：v-for="(item,index) in xxx" :key=“yyy”
3.可遍历：数组，对象，字符串，指定次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js" type="text/javascript"></script>
    <title>列表渲染</title>
</head>
<body>
    <div class="root">
        <ul>
<!--            <li v-for="person in persons" :key="person.id">-->
<!--            <li v-for="(p,index) in persons" :key="p.id">-->
<!--            Array-->
            <li v-for="(p,index) of persons" :key="p.id">
                Name:{{p.name}}, Age:{{p.age}}, index:{{index}}
            </li>
<!--                object-->
            <li v-for="(key,value) of car">
                {{key}}---{{value}}
            </li>
<!--                string-->
            <li v-for="(char,index) in str">
                {{char}}---{{index}}
            </li>
<!--                指定次数-->
            <li v-for="(num,index) in 5">
                {{num}}---{{index}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //Vue instance
        const vm = new Vue({
            // el:document.getElementById('root') the same
            el:".root",
            data:{
                persons:[
                    {id:'001',name:'Aqorid',age:18},
                    {id:'002',name:'Sam',age:19},
                    {id:'003',name:'Joy',age:20},
                ],
                car:{
                    name:'otto',
                    price:'70w',
                },
                str:'hello'
            }
        })

    </script>

</body>
</html>
key的相关问题：

Vue中key的作用：
1.key在虚拟dom中的作用：
key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据「新数据」生成「新的虚拟DOM」；
随后Vue进行「新虚拟DOM」与「旧虚拟DOM」的差异比较。

2.比较规则：
（1）旧虚拟DOM中找到了和新虚拟DOM相同的KEY：
a:若虚拟DOM内容没变，则直接使用之前的虚拟DOM；
b:若虚拟DOM内容改变，则生成新的真实DOM，随后替换掉页面之前的真实DOM；
（2）旧虚拟DOM中为找到与新虚拟DOM相同的KEY：
创建新的真实DOM，并渲染到页面；

3.用index作为key可能会出现的问题：
1.若对数据进行「逆序添加」，「逆序删除」等操作：
会产生没有必要的真实DOM更新，效率极低；
2.若结构中还包含输入类的DOM：
会产生错误DOM更新，界面出现问题。

4.如何选择key：
（1）最好是使用每条数据的唯一标识作为key，如：id,telephone等；
（2）如果不存在「逆序添加」，「逆序删除」等操作，仅用于渲染列表用于展示，使用index作为key是没有问题的；

列表过滤：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js" type="text/javascript"></script>
    <title>列表过滤</title>
</head>
<body>
    <div class="root">
        <input type="text" v-model:value="keyWord">

        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
               {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        /**
         *  watch filter
         */
        // const vm = new Vue({
        //     // el:document.getElementById('root') the same
        //     el:".root",
        //     data:{
        //         persons:[
        //             {id:'001',name:'马东美',age:18,sex:'女'},
        //             {id:'002',name:'周东雨',age:19,sex:'女'},
        //             {id:'003',name:'周结伦',age:20,sex:'男'},
        //             {id:'004',name:'纹子伦',age:21,sex:'男'},
        //         ],
        //         keyWord:'',
        //         filPersons:[],
        //     },
        //     watch:{
        //         keyWord: {
        //             immediate:true,
        //             handler(newValue){
        //                 this.filPersons = this.persons.filter((p)=>{
        					/**
        					*如果indexof的返回值不为-1，则说明name包含newValue
        					*/
        //                     return p.name.indexOf(newValue) !== -1;
        //                 })
        //             }
        //         }
        //     }
        // })
        
        
        /**
         * computed filter
         */
        new Vue({
            el:'.root',
            data:{
                keyWord:[],
                persons:[
                    {id:'001',name:'马东美',age:18,sex:'女'},
                    {id:'002',name:'周东雨',age:19,sex:'女'},
                    {id:'003',name:'周结伦',age:20,sex:'男'},
                    {id:'004',name:'纹子伦',age:21,sex:'男'},
                ],
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>

</body>
</html>
列表排序：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js" type="text/javascript"></script>
    <title>列表过滤</title>
</head>
<body>
    <div class="root">
        <input type="text" v-model:value="keyWord" placeholder="input the name">
        <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.id">
               {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

    
        /**
         *  watch filter
         */
        // const vm = new Vue({
        //     // el:document.getElementById('root') the same
        //     el:".root",
        //     data:{
        //         persons:[
        //             {id:'001',name:'马东美',age:18,sex:'女'},
        //             {id:'002',name:'周东雨',age:19,sex:'女'},
        //             {id:'003',name:'周结伦',age:20,sex:'男'},
        //             {id:'004',name:'纹子伦',age:21,sex:'男'},
        //         ],
        //         keyWord:'',
        //         filPersons:[],
        //     },
        //     watch:{
        //         keyWord: {
        //             immediate:true,
        //             handler(newValue){
        //                 this.filPersons = this.persons.filter((p)=>{
        					/**
        					*如果indexof的返回值不为-1，则说明name包含newValue
        					*/
        //                     return p.name.indexOf(newValue) !== -1;
        //                 })
        //             }
        //         }
        //     }
        // })
        
             /**
         * computed filter
         */
        new Vue({
            el:'.root',
            data:{
                keyWord:[],
                persons:[
                    {id:'001',name:'马东美',age:22,sex:'女'},
                    {id:'002',name:'周东雨',age:19,sex:'女'},
                    {id:'003',name:'周结伦',age:18,sex:'男'},
                    {id:'004',name:'纹子伦',age:21,sex:'男'},
                ],
                sortType:0,   //0 原顺序 1 年龄降序 2 年龄升序
            },
            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>

</body>
</html>
爱吃饭的阿强
关注
专栏目录
VUE 03 列表渲染 key 数据监视原理 收集表单数据 过滤器 内置指令 自定义指令
weixin_58562753的博客
03-06 632
列表渲染 key 数据监视原理 收集表单数据 过滤器 内置指令 自定义指令
学习vue笔记
qq_46093695的博客
02-20 456
学习vue中的笔记。
使用Vue实现人员列表过滤。
weixin_45878279的博客
04-23 272
这段代码显示了一个人员列表，可以通过输入名字来过滤人员列表。
搜索栏模糊过滤数据
qq_42774501的博客
01-03 261
第一种方式是watch监听实现 模板语法 <div id="root"> <h2>人物信息</h2> <input type="text" placeholder="请输入名字" v-model='keyword'> <ul> <!-- 数组形式第一个接受的是数据，第二个是索引 --> <li v-for="(value,index) in filPersons" :key=ind
vue 列表过滤
MCCLS的博客
07-15 544
用一个案例大致解释下： 这边要进行一个模糊查询 输入一个冬,则只显示上面俩个 也就是说,把100条数据根据你的输入只显示出6条这就是一种过滤 要输入一个字时,下面就要发生改变所以就是一个v-model的双向绑定 用watch实现： 这边使用了 indexOf（） 不包含则返回-1包含则返回对应的索引值 filter过滤方法中,它是不会该变数组的,会新生成出一个数组,而这还没有对新生成的数组进行调用 原数据不能更改所以要定义一个filPersons 前面...
Vue学习笔记-Day3 - vue列表渲染、事件监听、表单绑定
qq_33426324的博客
02-23 342
Day3 - vue列表渲染、事件监听、表单绑定 列表渲染 1 基本使用 使用v-for进行循环渲染 <ul> <li v-for="(item,index) in books"> <!-- {{index}}-{{item.name}}<br> --> <span v-for="(v...
Vue笔记-Day05-01（Vue的指令）
weixin_57155307的博客
12-24 480
目前用过的指令： v-bind :单向绑定 v-model :双向绑定 v-for :遍历数组/对象/字符串 v-on :绑定事件监听，简写为@ v-if :条件渲染 v-else :条件渲染 v-show :条件渲染 5.1 v-text: 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换调节点中的内容，{{ xx }}则不会 <!DOCTYPE html> <html lang="en"> <head>
vue2-day7.zip
08-10
3. **指令**：Vue提供了多种内置指令，如`v-if`（条件渲染）、`v-for`（循环渲染）、`v-on`（绑定事件监听器）和`v-bind`（绑定属性）。它们在HTML元素上以`v-`开头，帮助我们扩展HTML的功能。 4. **计算属性**：在...
VUE-2.X学习笔记day8
04-30
3. **条件渲染与循环**：Vue提供了`v-if`和`v-show`指令进行条件渲染，根据表达式的真假决定是否渲染元素。`v-for`指令用于循环渲染数组或对象，每个迭代都会生成一个新实例。 4. **指令与修饰符**：Vue有许多内置...
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1976
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
Vue笔记，Vue笔记，Vue笔记
07-18
此外，还会讨论条件渲染（如`v-if`和`v-show`）和列表渲染（如`v-for`）。 "Day 04"可能涉及状态管理，如Vuex的使用。Vuex是Vue生态中的一个状态管理模式和库，用于集中管理应用的状态，实现组件间的通信。开发者会...
学习笔记-DAY01-VUE
qq_37477913的博客
09-23 856
学习笔记-DAY01-VUE 文章目录前言一、Vue中的钩子函数&监听&方法的调用时机？二、点击上一页、下一页后刷新，页面依旧可以跳回当前页，而非首页三、点击筛选条件后，被点击的参数能够添加到地址栏中四、点击事件五、过滤条件查询六、页面静态化七、Thymeleaf 前言 第一次尝试在网络上写笔记，不够成熟，暂时只为了以后能及时翻查而写 一、Vue中的钩子函数&监听&方法的调用时机？ 钩子（create）：页面加载时发请求(刷新) 监听（watch）：是被监听的字..
【Vue】列表过滤
Erin_jwx的博客
08-04 181
用watch实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
原型链+instanceof+Vue底层原理
m0_65985318的博客
10-18 686
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 576
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
vue video播放m3u8监控视频
最新发布
YM_010530的博客
10-18 81
很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错。直接添加如下代码即可。
【VUE】v-show 和 v-if 的区别
10-18 51
v-show 和 v-if 的区别
【vue】指令补充+样式绑定+计算属性+侦听器
zxj20041003的博客
10-13 877
所谓指令修饰符就是让指令的 功能更强⼤，书写更便捷如何监听回⻋键？​ 答: 1、 @keydown.enter -> 回⻋按下​ 2、@keyup.enter -> 回⻋抬起如何阻⽌默认⾏为、阻⽌冒泡？​ 答: 1、@click.prevent -> 阻⽌默认⾏为​ 2、@click.stop -> 阻⽌冒泡​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌v-model的3个修饰符的作⽤是什么？
Vue3 中使用 toRefs的方法
qq_58341172的博客
10-12 352
当我们使用，reactive定义响应式对象的时候，使用let{name,age} = person 解析对象后，其name,age并不是响应式的，因此我们需要使用，toRefs属性，将其转化为响应式的。并且，使用toRefs转化后的name,age其变成了，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值