Vue｜数据渲染

红太狼 2023-09-25 18:06 18阅读 0赞

![968f4c3a9001403aaa609f4e85ac2933.gif][]

> Vue 是如何将编译器中的代码转换为页面真实元素的？在Vue 中,自带了模板渲染,而模板的语法也非常简洁易懂。  
> 精彩专栏持续更新↓↓↓  
> [微信小程序实战开发专栏][Link 1]

###  ###

*  一. 数据渲染
 *   *  1.1 条件渲染
     *   *  v-if
         *  v-show
     *  1.2 列表渲染
     *   *  v-for
     *  1.3 小结

# 一. 数据渲染 #

## 1.1 条件渲染 ##

> vue条件渲染指令包括v-if、v-else、v-else-if、v-show。v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染；v-show根据一个条件决定是否显示元素或者组件，依赖于控制display属性。

![2c4636e03abd4b66bbba0ba2443f3096.png][]

### v-if ###

> 在开始前准备如下，创建对应的分录文件夹以及页面

![在这里插入图片描述][95fe278adfe34849b00f8e93521441ae.png]

> 在html中创建对应的标签及vue实例

![在这里插入图片描述][fc50f1eaeddd45b2bb33cd2a242d2dfa.png]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>数据渲染</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>
    <body>
        
        <div id="root">
            
        </div>
    
    
        <script type="text/javascript">
            //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            // 创建vue实例
            const vm = new Vue({
                el:'#root',
                //函数式
                data:function(){
                    return{
                        name:'摔跤猫子',
                    };
                },
                methods:{
                    
                },
            });
            
        </script>
    </body>
    </html>

> 需求来了，如何动态操作div的显示隐藏呢? 在html中隐藏一个div这个功能想必大家都很擅长，直接给div加一个display:none就ok，当然也可以通过操作DOM的方式来给这个div追加一个样式，不过归根结底还是不够灵活，那么在vue中该如何实现呢?

![44e286f7c3ea4af6aea48dcff9959c49.png][]

![在这里插入图片描述][f94fefa0cc82460db1a92fb87f091889.png]

> 在vue中是有着条件渲染指令的，在实例中定义一个bool类型的字段，同时在div标签中使用v-if指令

![在这里插入图片描述][7ea7931e3bab477ba667f4e226d5e53b.png]

![在这里插入图片描述][c8fa7d58964e4d658fee87713b348795.png]

> 可以通过素材看出html中div的显示隐藏是可以通过在data中定义的变量来控制的

![在这里插入图片描述][f7fa229537ce4735a146f8ca403d1212.gif]

> 在网页右击查看源代码，可以看到整个div并没有隐藏，而是直接被移除掉了，这是因为v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

![在这里插入图片描述][129a49af4de144e8b0056586026fc726.png]

> 既然有v-if，那必然也有else了，通过案例来更好的来理解v-if条件渲染，在html中绘制标签如下，通过点击按钮的方式来控制div显示隐藏

![在这里插入图片描述][507ecbfcb9364647a27025b25c9d0737.png]

<div v-if="show">
         <h2>{
       {name}}</h2>
     </div>
     <div v-else>
         <h2>{
       {name}}被隐藏了</h2>
     </div>
     
     <button type="button" @click="switchDiv()">点我</button>

> 同时在vue实例的methods中实现对应的click事件

![在这里插入图片描述][f04ff73611394ab1a46827a92bf0713a.png]

switchDiv(){
        this.show = !this.show;
     },

> 通过下方的素材可以更加直观的看到，div标签在不断的销毁和重建

![在这里插入图片描述][ad9e38ecfb0d45c5a941d491b6169398.gif]  
![在这里插入图片描述][fc0c5e6dfc8941f1a67709af194ed628.png]

### v-show ###

> 简单的业务场景可以用v-if，如果在切换频繁的场景用v-if可能就不大合适了，在数据量很大或者样式复杂的页面反复构建的过程可能会给用户带来不好的体验，那么有没有一种可替代方案来解决呢?

![bd1ed361e5d04cbb9c98e811a563d695.png][]

> v-show关键字，使用方法跟v-if一致，通过在data中定义的bool字段来控制其显示隐藏

![在这里插入图片描述][1b9460abfa8141db882c6304b66bc5ec.png]

> 通过素材图可以很清晰的看到，div标签始终都在，只不过当值为false时，给它赋予了一个display的样式

![在这里插入图片描述][d0174cefe3fc400f84d38f3ce8c6dcf8.gif]

## 1.2 列表渲染 ##

> 列表渲染通俗易懂一点的解释就是获取列表中的各种数据，并将它展示出来

![在这里插入图片描述][83ceabc5d8bc4e2f84a57999410f9493.png]

![在这里插入图片描述][7b92ddfd0b27467cb23a07839021a5db.png]

### v-for ###

> 在vue中通过v-for指令来展示，在data中定义好需要遍历的数据源

![在这里插入图片描述][82f1724a99cf423682235ad11bfe75af.png]

articleList:[
    	{
    		title:'微信小程序｜基于小程序+云开发制作一个菜谱小程序',
    		author:'摔跤猫子',
    	},
    	{
    		title:'还在想假期去哪玩?直接做一个旅游攻略小程序',
    		author:'摔跤猫子',
    	}
    ],

> 在html代码中直接将v-for定义在li标签中

![在这里插入图片描述][dde96d89cb0d4f87ad70a545446307e3.png]

<ul>
    	<li v-for="(item,index) in articleList">{
       {item.title}}-{
       {item.author}}</li>
    </ul>

![在这里插入图片描述][90a03f14fbf74ce79daaa42bb4968416.png]

## 1.3 小结 ##

*  **条件渲染v-if指令**
 *  使用场景：切换频率较低
 *  特点：切换时不符合表达式条件的DOM元素是直接被移除，而非显示隐藏，再次切换渲染时则需要重新构建
 *  注意：v-if 可与 v-else-if、v-else同时使用，但是在html结构中不能被打断，中间不能掺杂其他元素
 *  **条件渲染v-show指令**
 *  使用场景：切换频率较高
 *  特点：不符合表达式条件的DOM元素未被移除，而是使用样式进行隐藏
 *  **列表渲染v-for指令**
 *  用于展示列表数据
 *  语法 v-for = (item,index) in 数据源
 *  可遍历展示数组、对象、字符串等形态数据

[968f4c3a9001403aaa609f4e85ac2933.gif]: https://img-blog.csdnimg.cn/968f4c3a9001403aaa609f4e85ac2933.gif
[Link 1]: https://blog.csdn.net/weixin_42794881/category_10483785.html?spm=1001.2014.3001.5482
[2c4636e03abd4b66bbba0ba2443f3096.png]: https://img-blog.csdnimg.cn/2c4636e03abd4b66bbba0ba2443f3096.png
[95fe278adfe34849b00f8e93521441ae.png]: https://img-blog.csdnimg.cn/95fe278adfe34849b00f8e93521441ae.png
[fc50f1eaeddd45b2bb33cd2a242d2dfa.png]: https://img-blog.csdnimg.cn/fc50f1eaeddd45b2bb33cd2a242d2dfa.png
[44e286f7c3ea4af6aea48dcff9959c49.png]: https://img-blog.csdnimg.cn/44e286f7c3ea4af6aea48dcff9959c49.png
[f94fefa0cc82460db1a92fb87f091889.png]: https://img-blog.csdnimg.cn/f94fefa0cc82460db1a92fb87f091889.png
[7ea7931e3bab477ba667f4e226d5e53b.png]: https://img-blog.csdnimg.cn/7ea7931e3bab477ba667f4e226d5e53b.png
[c8fa7d58964e4d658fee87713b348795.png]: https://img-blog.csdnimg.cn/c8fa7d58964e4d658fee87713b348795.png
[f7fa229537ce4735a146f8ca403d1212.gif]: https://img-blog.csdnimg.cn/f7fa229537ce4735a146f8ca403d1212.gif
[129a49af4de144e8b0056586026fc726.png]: https://img-blog.csdnimg.cn/129a49af4de144e8b0056586026fc726.png
[507ecbfcb9364647a27025b25c9d0737.png]: https://img-blog.csdnimg.cn/507ecbfcb9364647a27025b25c9d0737.png
[f04ff73611394ab1a46827a92bf0713a.png]: https://img-blog.csdnimg.cn/f04ff73611394ab1a46827a92bf0713a.png
[ad9e38ecfb0d45c5a941d491b6169398.gif]: https://img-blog.csdnimg.cn/ad9e38ecfb0d45c5a941d491b6169398.gif
[fc0c5e6dfc8941f1a67709af194ed628.png]: https://img-blog.csdnimg.cn/fc0c5e6dfc8941f1a67709af194ed628.png
[bd1ed361e5d04cbb9c98e811a563d695.png]: https://img-blog.csdnimg.cn/bd1ed361e5d04cbb9c98e811a563d695.png
[1b9460abfa8141db882c6304b66bc5ec.png]: https://img-blog.csdnimg.cn/1b9460abfa8141db882c6304b66bc5ec.png
[d0174cefe3fc400f84d38f3ce8c6dcf8.gif]: https://img-blog.csdnimg.cn/d0174cefe3fc400f84d38f3ce8c6dcf8.gif
[83ceabc5d8bc4e2f84a57999410f9493.png]: https://img-blog.csdnimg.cn/83ceabc5d8bc4e2f84a57999410f9493.png
[7b92ddfd0b27467cb23a07839021a5db.png]: https://img-blog.csdnimg.cn/7b92ddfd0b27467cb23a07839021a5db.png
[82f1724a99cf423682235ad11bfe75af.png]: https://img-blog.csdnimg.cn/82f1724a99cf423682235ad11bfe75af.png
[dde96d89cb0d4f87ad70a545446307e3.png]: https://img-blog.csdnimg.cn/dde96d89cb0d4f87ad70a545446307e3.png
[90a03f14fbf74ce79daaa42bb4968416.png]: https://img-blog.csdnimg.cn/90a03f14fbf74ce79daaa42bb4968416.png