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

最新推荐文章于 2024-07-04 10:01:18 发布

2401_84435555

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量466

点赞数 18

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_84435555/article/details/138237961

版权

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元素未被移除，仅仅是使用样式隐藏掉

注意:使用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>

第三个参数表示位置索引

<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列表排序

最后

前15.PNG

前16.PNG

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.2列表排序

最后

[外链图片转存中…(img-0EWf10VZ-1714171934664)]

[外链图片转存中…(img-nIkYjx5f-1714171934666)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84435555

关注

18
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
【学vue跟玩一样】快速搞懂vue渲染(1)

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】3.2列表排序[外链图片转存中…(img-0EWf10VZ-1714171934664)][外链图片转存中…(img-nIkYjx5f-1714171934666)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫