Vue3学习第四天

一依不舍
282 阅读3分钟

这是我参与更文挑战的第1天，活动详情查看：更文挑战

条件渲染

v-if

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: true
        }
      },
      template: `
      <div v-if="show">
        {{tip}}
      </div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当show为true时,控制台显示结果:

iftrue.png

当show为false时,控制台显示结果:

iffalse.png

我们发现v-if为true时,对应的dom元素是显示的,当为false时,dom会消失,我们通过控制台显示结果可以看出。

v-show

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: true
        }
      },
      template: `
      <div v-show="show">
        {{tip}}
      </div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当show为true时,控制台显示结果:

showtrue.png

当show为false时,控制台显示结果:

showfalse.png

我们发现v-show为true时,对应的dom元素显示的样式为display:block,当为false时,对应的dom元素显示的样式为display:none,我们通过控制台显示结果可以看出,通过这两个显示我们也能知道v-show和v-if的区别,v-if是控制dom的显示和隐藏,v-show是控制样式的display为block或者none,所以当我们如果频繁操作dom时,我们更建议使用v-show从而来提高性能,如果不涉及频繁操作dom,这两个就差距不大了。

拓展知识

除了v-if和v-show之外,还有v-else,但是v-else只能和v-if在一起使用,而且要上下两行,中间不能隔着别的div元素,不然vue会报警告,也不能与v-show在一起使用

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: false
        }
      },
      template: `
      <div v-if="show">{{tip}}</div>
      <div v-else>今天不用学习了</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果如下:

else.png

当v-if为false时,就会执行v-else的操作,所以控制台会显示对应的字段。

而且还可以使用v-else-if,代码如下

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第四天',
          show: false,
          showTwo: false
        }
      },
      template: `
      <div v-if="show">{{tip}}</div>
      <div v-else-if="showTwo" >elseif</div>
      <div v-else>else</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当v-if和v-else-if都不成立,就会显示v-else中的内容,控制台显示结果如下：

elseif.png

列表循环渲染

v-for

循环数组

当我们在vue中想循环数组并展示出来,我们可以使用v-for的指令

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3']
        }
      },
      template: `
      <div v-for="(item, index) in vueList" :key="index">{{item}} -- {{index}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

for.png

如上面代码中所写,其中的item代表的是每一项的值,index显示的是对应的下标,但是记住index下标是从0开始的。

循环对象

下面我们看下循环对象和循环数组的区别？

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3'],
          vueObj: {
            one: 'vue学习第一天',
            two: 'vue学习第二天',
            three: 'vue学习第三天'
          }
        }
      },
      template: `
      <div v-for="(value, key, index) in vueObj" :key="index">{{value}} -- {{key}} -- {{index}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

obj.png

从结果看,我们知道对象里面的参数不是2个,而是3个,其中value表示的是对象的值,可以表示的是对象的名,index表示的索引值。

数组和对象

当我们在点击按钮,在数组中增加值时,代码如下

第一种方法通过数据的变更函数[push, pop, unshift, shift, splice, sort, reverse]处理,下面只举例了push方法,其他的方法自行测试一下

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          vueList: ['vue', 'vue2', 'vue3'],
          vueObj: {
            one: 'vue学习第一天',
            two: 'vue学习第二天',
            three: 'vue学习第三天'
          }
        }
      },
      methods: {
          addItemClick() {
             // 使用数组的变更函数
            this.vueList.push('vue4')
          }
      },
      template: `
      <div v-for="(value, index) in vueList" :key="index">{{value}} -- {{index}}</div>
      <button @click="addItemClick">新增按钮</button>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们点击新增按钮时,控制台结果显示如下:

pushlist.png

当我们点击新增按钮时,发现vue4已经添加到页面中了。在vue中当我们添加一个元素时,vue会找到我们存在的直接复用,而不存在的才添加。vue本身不知道哪些是添加或者可以复用的,此时我们就需要在循坏列表中增加key值,key值尽量用唯一的,如代码:key="index",我们并不建议用index。

avatar
文章
阅读
粉丝