时间戳

首页 > 解决方案 > Vue用v-if设置2个条件

javascript - Vue用v-if设置2个条件

问题描述

我正在练习 Vue 并遇到问题，是否可以使用 v-if 设置 2 个条件？我的意思是这是我的代码：

所以基本上可以使用 && 设置两个条件，还是应该以不同的方式完成？

更新的完整代码：

我尝试了 3 种方法，在模板、方法和计算方法中，它们都只检查一个条件

在你们的帮助下，我对它进行了修改，现在它可以工作了！非常感谢大家的帮助，但最后一件事，在控制台日志中显示：“Uncaught TypeError: _vm.validated is not a function”，显示验证是否正确无关紧要

<template>
  <div id='add-blog'>
      <h2>Add news Blog Post</h2>
      <form v-if='is_validated'>
          <label>User</label>
          <input type='text' v-model.lazy='user' required />
          <label>Password</label>
          <input type='password' v-model.lazy='password' required />
          <button v-on:click.prevent='validated'>Check me</button>
      </form>
      <div v-else>
          <p>error</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      user: "",
      password: "",
      is_validated: true,
    };
  },
  computed: {
    validated() {
      if (this.user == 'name' &&  this.password == '111') {
          return this.is_validated = false;
      }
    }
  },
};
</script>

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

您当然可以在 v-if 语句中编写复杂的表达式。根据有关vue 中表达式和指令的官方文档

指令属性值应为单个 JavaScript 表达式

对于我在您的示例中看到的内容，可能是您的单个文件组件与正确的结构不匹配。如果您查看单文件组件指南

您会看到您的组件需要一个标签，并且您应该在内部使用您最喜欢的模板语言编写模板。如果您将条件放在计算属性中，它也会更干净。如果我们将所有这些都考虑在内，您可以使用类似于此的代码来实现您的目标：

<template>
 <div>
   <form v-if="showForm">
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />
   </form>
   <div v-else>
     <p></p>
   </div>
 </div><!-- it's a good practice to have only one root element -->
</template>

<script>
export default {
  data() {
    return {
        user:'',
        password:''
    };
  },
  computed: {
   showForm () {
     return user != 'name' && password != '111';
   }
  }
};
</script>

推荐阅读