vue3 基础-列表渲染

本篇讲列表渲染, 主要是对 v-on 指令配合 v-if 和一些数组相关的方法来体验 vue 的模板渲染方法.

数组元素的渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <title>列表渲染</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          listArray: ['hello', 'world', 'youge', 'cool']
        }
      },
      template: `
      <div 
		v-for="(item, index) in listArray" 
		:key="index
	  >
		{{item}}--{{index}}</div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

主要还是对 v-on 的使用罢了.

hello--0
world--1
youge--2
cool--3

对象元素的渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <title>列表对象渲染</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          listObject: {
            firstName: 'you',
            lastName: 'ge',
            job: 'marketing'
          }
        }
      },
      template: `
      <div 
        v-for="(value, key, index) in listObject" 
        :key="index"
      >
        {{value}}--{{key}}--{{index}}
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

you--firstName--0
ge--lastName--1
marketing--job--2

结合数组 & 对象 方法来演示

就纯复习一下数组, 对象的一些增删改查的基本方法而已.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>综合案例</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          listArray: ['hello', 'world', 'youge', 'cool'],
          listObject: {
            firstName: 'dell',
            lastName: 'lee',
            job: 'teacher'
          }
        }
      },
      methods: {
        addItemClick () {

          // 1. 数组变更函数: push, pop, shift, unshift, splice...
          
          // this.listArray.push('cj')
          // this.listArray.pop();
          // this.listArray.shift();
          // this.listArray.unshift('cj');
          // this.listArray.splice(1, 2);
          // this.listArray.sort();
          // this.listArray.reverse();

          // 2. 直接替换数组(函数式编程)
          // this.listArray = ['aa', 'bb', '中国'];
          // this.listArray = ['bye', 'world'].filter(item => item == 'bye');

          //3. 直接更新数组内容
          // this.listArray[1] = 'youge';

          // 对象: 新增
          this.listObject['age'] = 18;
          this.listObject.sex = 'male'
        }
      },
      template: `
      <div>
        <template
         v-for="(value, key, index) in listObject" 
            :key="index" 
          >
            <div v-if="key != 'lastName'">
            {{value}} -- {{key}}
          </div>
        </template>
        <div v-for="item in 5">{{item}}</div>
        <button @click="addItemClick">新增</button>
      </div>
    `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

列表渲染这个在实际应用中应该是最高频的了, 尤其是对后端数据进行渲染就必然会用到这个 v-for 相关的啦.

posted @ 2022-08-28 23:32  致于数据科学家的小陈  阅读(251)  评论(0)  编辑  收藏  举报