Vue学习笔记04

简介: Vue学习笔记04

条件渲染


  1. v-if 写法: (1). v-if="表达式"
    (2). t-else-if="表达式"
    (3). v-else="表达式"

适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被"打断”。


  1. v-show 写法:v-show="表达式" 适用于:切换频率较高的场景。 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉


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


template可以和v-if配合使用,但是不能和v-show一块使用。template不会影响代码结构

<body>
     <div id="root">
         <template v-if="showDiv">
             <div>123456</div>
             <div>456789</div>
             <div>3333333</div>
         </template>
     </div>
 </body>
 <script>
     new Vue({
         el: '#root',
         data() {
             return {
                 showDiv: false
             }
         },
     })
 </script>


遍历


v-for指令


  1. 用于展示列表数据


  1. 语法:v-for="(item, index) in xxx" :key="index"


  1. 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)


key的作用


  1. 虚拟DOM中key的作用: key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:


  1. 对比规则: (1). 旧虚拟DOM中找到了与新虚拟DOM相同的key:


  1. 若虚拟DOM中内容没变,直接使用之前的真实DOM !


  1. 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。


  1. (2). 旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM,随后渲染到到页面。


  1. 用index作为key可能会引发的问题:


  1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新==〉界面效果没问题,但效率低。


  1. 如果结构中还包含输入类的DOM: 会产生错误DOM更新==>界面有问题。


  1. 开发中如何选择key? :


  1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。


  1. 如果不存在对数据的


  1. 逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。


列表过滤


搜索框实现名称模糊搜索功能


1.使用计算属性实现


<body>
     <div id="root">
         <h2>成员信息</h2>
         <input type="text" placeholder="请输入名字" v-model="keyWord">
         <li v-for="p in filPerson" :key="p.id">
             {{p.name}} - {{p.age}} - {{p.sex}}
         </li>
     </div>
 </body>
 <script>
     new Vue({
         el: '#root',
         data() {
             return {
                 keyWord: '',
                 persons: [{
                         id: '001',
                         name: '马冬梅',
                         age: 25,
                         sex: '女'
                     },
                     {
                         id: '002',
                         name: '周冬雨',
                         age: 22,
                         sex: '女'
                     },
                     {
                         id: '003',
                         name: '周杰伦',
                         age: 29,
                         sex: '男'
                     },
                     {
                         id: '004',
                         name: '邓伦',
                         age: 28,
                         sex: '男'
                     }
                 ]
             }
         },
         computed: {
             filPerson() {
                 return this.persons.filter((p) => {
                     return p.name.indexOf(this.keyWord) !== -1
                 })
             }
         }
     })
 </script>


2.使用监视实现


<body>
     <div id="root">
         <h2>成员信息</h2>
         <input type="text" placeholder="请输入名字" v-model="keyWord">
         <li v-for="p in filPersons" :key="p.id">
             {{p.name}} - {{p.age}} - {{p.sex}}
         </li>
     </div>
 </body>
 <script>
     new Vue({
         el: '#root',
         data() {
             return {
                 keyWord: '',
                 persons: [{
                         id: '001',
                         name: '马冬梅',
                         age: 25,
                         sex: '女'
                     },
                     {
                         id: '002',
                         name: '周冬雨',
                         age: 22,
                         sex: '女'
                     },
                     {
                         id: '003',
                         name: '周杰伦',
                         age: 29,
                         sex: '男'
                     },
                     {
                         id: '004',
                         name: '邓伦',
                         age: 28,
                         sex: '男'
                     }
                 ],
                 filPersons: []
             }
         },
         watch: {
             keyWord: {
                 immediate: true,
                 handler(val) {
                     this.filPersons = this.persons.filter((p) => {
                         return p.name.indexOf(val) !== -1
                     })
                 }
             }
         }
     })
 </script>


列表排序


<body>
     <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>
         <li v-for="p in filPerson" :key="p.id">
             {{p.name}} - {{p.age}} - {{p.sex}}
         </li>
     </div>
 </body>
 <script>
     new Vue({
         el: '#root',
         data() {
             return {
                 keyWord: '',
                 persons: [{
                         id: '001',
                         name: '马冬梅',
                         age: 25,
                         sex: '女'
                     },
                     {
                         id: '002',
                         name: '周冬雨',
                         age: 22,
                         sex: '女'
                     },
                     {
                         id: '003',
                         name: '周杰伦',
                         age: 29,
                         sex: '男'
                     },
                     {
                         id: '004',
                         name: '邓伦',
                         age: 28,
                         sex: '男'
                     }
                 ],
                 filPersons: [],
                 sortType: 0, //0代表原数据   1降序   2升序
             }
         },
         computed: {
             filPerson() {
                 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>


相关文章
|
4天前
|
JavaScript
|
6天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6
|
3天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
19 2
|
6天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
21 4
|
6天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
15 1
|
6天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
18 1
|
6天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
23 0
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
16 0
|
6天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
9 0
|
6天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
6 0