
<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>

＞效果

二、列表渲染 - 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>

＞效果

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>

＞效果

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>

＞效果

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>

＞效果

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

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

作用: 为了防止渲染错位

＞代码 :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>

＞效果

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>

＞效果

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>

＞效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/998135

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

本书目录：点击进入

一、条件渲染 - 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属性

作用: 为了防止渲染错位

＞ 代码 :key="item.id"

＞ 效果

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

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

＞ 代码：保留id能被2整除的项

＞ 效果

3.3 template标签起到的作用

作用: 编组，替代无用div

＞ 代码

＞ 效果

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

＞代码

＞效果

＞代码

＞效果

＞代码

＞效果

＞代码

＞效果

＞代码

＞效果

＞代码 :key="item.id"

＞效果

＞代码：保留id能被2整除的项

＞效果

＞代码

＞效果