vue常用指令(v-if)

一、v-if 指令

  • 作用:
    • 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

二、代码演示

1、v-if 设置条件,添加按键修改状态

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <input type="button" value="切换显示状态" @click="changeShow" /><br />
          <img v-if="isShow" src="./img/测试图片.jpeg" />
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            isShow: true,
          },
          methods: {
            changeShow: function () {
              this.isShow = !this.isShow;
            },
          },
        });
      </script>
    </html>
    
    

2、原理

  1. 使用示例中的按钮点击事件,当点击按钮 查看浏览器代码显示的变化:

    1. 图片显示:
      vue常用指令(v-if)_第1张图片

    2. 图片消失:
      vue常用指令(v-if)_第2张图片

    对比可以看出,vue在底层通过直接操作dom是否显示实现这一功能。

    由此,当需要 频繁切换图片显示使用 v-show ,反之使用v-if

你可能感兴趣的:(vue,vue.js,javascript,前端)