【Vue3】2-8 : 条件渲染与列表渲染及注意点

这篇具有很好参考价值的文章主要介绍了【Vue3】2-8 : 条件渲染与列表渲染及注意点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本书目录:点击进入

一、条件渲染 - v-if = 表达式

1.1 真值与假值

1.2  v-if ,v-else-if ,v-else

1.3  实战:isShow1 为真值时 显示 bbbbb

>  代码

>  效果

二、列表渲染 - v-for

2.1 渲染 - 数组

>  代码

>  效果

2.2 渲染 - 对象

>  代码

>  效果

2.3 渲染 - 整数

 >  代码

>  效果

2.3 渲染 - 文本(字符串)

 >  代码

>  效果

三、v-if 和 v-for 注意点

3.1 列表渲染需要添加key属性

作用: 为了防止渲染错位

 >  代码

>  效果

3.2 v-if 和 v-for 尽量不要一起使用

作用: 防止v-if 无法读取元素值

 >  代码:保留id能被2整除的项

>  效果

3.3 template标签起到的作用 

作用: 编组,替代无用div

 >  代码

>  效果


一、条件渲染 - v-if = 表达式

  • 表达式 = truthy真值 时 渲染一块内容

1.1 真值与假值

  • falsy 假值 :(即 false、0、-0、0n、""、null、undefined 和 NaN

  • truthy真值非假值均为真值

1.2  v-if ,v-else-if ,v-else

  • 三者可以搭配使用

  • 中间不能插入其它代码,否则会报错

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

1.3  实战:isShow1 为真值时 显示 bbbbb

>  代码

<body>
  <div id="app">
    <div v-if="isShow">aaaaa</div>
    <div v-else-if="isShow1">bbbbb</div>
    <div v-else>ccccc</div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          isShow: 0,
          isShow1: 2,
        }
      }
    }).mount('#app');

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

二、列表渲染 - v-for

  • 数组渲染列表

  • item in items 形式

  • items:源数组

  • item :数组元素的别名

2.1 渲染 - 数组

>  代码

<body>
  <div id="app">
    <div v-for="item, index in list">{{ item }}, {{ index }}</div>
    <div v-for="item in list">{{ item }}</div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          list: ['a', 'b', 'c']
        }
      }
    }).mount('#app');


    setTimeout(()=>{
      //vm.list.push('d');
      vm.list[1] = 'd';
    }, 2000) 

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

2.2 渲染 - 对象

>  代码

<body>
  <div id="app">
    <div v-for="value in info">{{ value }}</div>
    <div v-for="value, key in info">{{ value }}, {{ key }}</div>
    <div v-for="value, key, index in info">{{ value }}, {{ key }}, {{ index }}</div>

  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          info: { username: 'xiaoming', age: 20 }
        }
      }
    }).mount('#app');

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

2.3 渲染 - 整数

 >  代码

<body>
  <div id="app">
    <div v-for="item in num">{{ item }}</div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          num: 10
        }
      }
    }).mount('#app');

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

2.3 渲染 - 文本(字符串)

 >  代码

<body>
  <div id="app">

        <div v-for="item in text">{{ item }}</div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          text: 'hello'
        }
      }
    }).mount('#app');

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

三、v-if 和 v-for 注意点

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

3.1 列表渲染需要添加key属性

作用: 为了防止渲染错位

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

 >  代码 :key="item.id"

<body>
  <div id="app">
    <div v-for="item, index in list" :key="item.id">{{ item.text }}, {{ index }}, <input type="text"></div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          list: [
            { id: 1, text: 'a' },
            { id: 2, text: 'b' },
            { id: 3, text: 'c' },
          ]
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.list.unshift({ id: 4, text: 'd' });
    }, 3000)

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

3.2 v-if 和 v-for 尽量不要一起使用

作用: 防止v-if 无法读取元素值

 >  代码:保留id能被2整除的项

<body>
  <div id="app">
    <div v-for="item, index in oddList" :key="index">{{ item.text }}, {{ index }}, <input type="text"></div>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          list: [
            { id: 1, text: 'a' },
            { id: 2, text: 'b' },
            { id: 3, text: 'c' },
          ]
        }
      },
      computed: {
        oddList(){
          return this.list.filter((v)=> v.id%2 === 0);
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.list.unshift({ id: 4, text: 'd' });//向集合的头部添加元素
    }, 3000)
  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染

3.3 template标签起到的作用 

作用: 编组,替代无用div

 >  代码

<body>
  <div id="app">
    <template v-if="isShow">
      <div>aaaa</div>
      <div>bbbb</div>
    </template>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          isShow: true
        }
      }
    }).mount('#app');

  </script>
</body>

>  效果

【Vue3】2-8 : 条件渲染与列表渲染及注意点,架构师之路-java,vue.js,前端,javascript,条件渲染,列表渲染文章来源地址https://www.toymoban.com/news/detail-781788.html

到了这里,关于【Vue3】2-8 : 条件渲染与列表渲染及注意点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的组合式API中如何使用setup()函数中的条件渲染和循环渲染

    首先,让我们来了解一下什么是Vue3的组合式API。组合式API是一种在Vue3中用于构建组件的方式,它使用函数式编程的方法来组织代码,让你的组件更加清晰、易于理解和维护。而setup()函数则是组合式API的核心,它用于初始化组件并返回包含组件数据的对象。 现在,让我们来看

    2024年02月11日
    浏览(52)
  • Vue-15、Vue条件渲染

    1、v-show 在Vue中,v-show是一个指令,用于根据表达式的值来控制元素的显示与隐藏。当指令的值为true时,元素显示;当指令的值为false时,元素隐藏。 v-show的用法如下: 其中,表达式可以是一个计算属性、一个data的属性或者一个方法的返回值。 v-show的特点是,元素仍然存在

    2024年01月21日
    浏览(39)
  • 教程3 Vue3条件渲染指令(v-if、v-else、v-else-if、v-show、v-for)

    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 可以使用 v-else 为 v-if 添加一个“else 区块”。 v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。 可以用来按条件显示一个元素的指令是 v-show。 v-if、v-else、

    2024年02月11日
    浏览(43)
  • Vue条件渲染

       v-if 和 v-show 效果:false渲染效果不显示。 v-show:隐藏,但结构还在。 v-if:删除,结构不在     v-show 动态使用,和 v-if,v-else-if,v-else 使用 效果:  template的使用

    2024年02月16日
    浏览(37)
  • 如何在Vue表单处理中实现表单的条件渲染

    在Vue开发中,我们经常会遇到需要根据某些条件来渲染表单的情况。这种情况下,我们需要灵活地根据条件来展示或隐藏一些表单字段。本文将介绍如何在Vue中实现表单的条件渲染,并提供了代码示例。 一、使用v-if指令实现简单的条件渲染 在Vue中,我们可以使用v-if指令来根

    2024年02月12日
    浏览(29)
  • Vue插槽实现商品列表-编辑渲染

    2024年02月11日
    浏览(42)
  • 【Vue】学习笔记-列表渲染/数据监视

    v-for指令 用于展示列表数据 语法: v-for=“(item,index) in xxx” :key=“yyy” 可遍历:数组,对象,字符串(用的很少),指定次数(用的很少) 原理: 面试题:react. vue中的key有什么用?(key的内部原理) 虚拟Dom中key的作用: key是虚拟DOM对象的标识,档数据发生改变时,Vue会根据【

    2023年04月25日
    浏览(38)
  • Vue-16、Vue列表渲染(v-for的使用)

    1、vue遍历数组 也可以这样写 2、遍历对象

    2024年01月21日
    浏览(45)
  • 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析

    从 条件渲染 那一篇,我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊,有时候数据是一大坨一大坨的数据,如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了,Vue提供了另外的指令更好的实现,那便是:列表渲染 简单的列表渲染可以

    2024年02月19日
    浏览(31)
  • vue3多条件搜索功能

           搜索功能在后台管理页面中非常常见,本篇就着重讲一下vue3-admin-element框架中如何实现一个顶部多条件搜索功能 其中obj是要搜索的字段对应的对象,arr是从接口获取的列表数据源。

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包