vue 条件渲染v-if和v-show

Vue.js 条件渲染常用的有两个指令：v-if 和 v-show。

v-if

v-if 实际上是 Vue.js 提供的一种结构性指令，通过判断表达式的值的真假来控制元素是否渲染到 DOM 中。

<div id="app">
  <h2 v-if="isVisible">Hello, Vue.js!</h2>
  <button @click="isVisible = !isVisible">
    Toggle visibility
  </button>
</div>

在上面的例子中，当变量 isVisible 的值为 true 时，<h2> 元素会被渲染到页面中。而当点击“Toggle visibility”这个按钮时，会触发 isVisible 变量的取反操作，从而实现了控制元素显示与隐藏的功能。

v-show

v-show 指令和 v-if 类似也可以用于对元素是否渲染的控制，但是它是通过改变元素的 CSS 的 display 属性值来实现元素的显示和隐藏。

<div id="app">
  <h2 v-show="isVisible">Hello, Vue.js!</h2>
  <button @click="isVisible = !isVisible">
    Toggle visibility
  </button>
</div>

在上面的例子中，当变量 isVisible 的值为 true 时，<h2> 元素不会从文档中移除，而是使用 display: none 隐藏。而当点击“Toggle visibility”这个按钮时，会触发 isVisible 变量的取反操作，从而实现了控制元素显示与隐藏的功能。

区别

两者的主要区别是：v-if 是在每次渲染前检查表达式的值，如果为 false，则元素不会被渲染。而 v-show 则无论表达式的值是 true 还是 false，元素始终会被渲染，只是使用 CSS 的 display 属性来实现显示和隐藏。

在实际使用中，v-if 和 v-show 的选择由以下因素决定：

如果需要频繁切换元素的显示和隐藏，使用 v-show 可以获得更好的性能。
如果元素初始状态是隐藏的，可以使用 v-if 进行延迟渲染，减轻页面加载负担。
如果不需要频繁切换元素的显示和隐藏，并且初始状态已知，两个指令的差异就不大了。

下面是一个模拟登录表单的例子：

<div id="app">
  <form v-show="!isLoggedIn">
    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <button @click.prevent="login">Login</button>
  </form>
  <p v-else>Welcome, {{ username }}!</p>
</div>

在上面的例子中，使用 v-show 来控制登录表单的显示和隐藏。当 isLoggedIn 的值为 false 时，表单会显示；当 isLoggedIn 的值为 true 时，表单会隐藏，替而使用 <p> 元素显示欢迎信息。

完整代码演示如下：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 条件渲染v-if和v-show</title>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 v-if="isVisible">Hello, Vue.js!</h2>
    <button @click="isVisible = !isVisible">
      Toggle visibility
    </button>
    <br>
    <h2 v-show="isVisible">Hello, Vue.js!</h2>
    <button @click="isVisible = !isVisible">
      Toggle visibility
    </button>
    <form v-show="!isLoggedIn">
      <input type="text" placeholder="Username" v-model="username">
      <input type="password" placeholder="Password" v-model="password">
      <button @click.prevent="login">Login</button>
    </form>
    <p v-else>Welcome, {{ username }}!</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isVisible: true,
        isLoggedIn: false,
        username: '',
        password: ''
      },
      methods: {
        login() {
          if (this.username === 'admin' && this.password === '123456') {
            this.isLoggedIn = true;
          } else {
            alert('Invalid username or password!');
          }
        }
      }
    });
  </script>
</body>
</html>

在上面的例子中，在表单中填写正确的用户名和密码，点击“Login”按钮后，可以看到表单被隐藏，替而使用 <p> 元素显示欢迎信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 条件渲染v-if和v-show - Python技术站