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

Question

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

那么基本上是否可以使用 && 设置两个条件，或者应该以不同的方式完成？

更新的完整代码:

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

在你们的帮助下，我对它进行了一些修改，现在它可以工作了!非常感谢大家的帮助，但最后一件事，在控制台日志中它向我显示:“未捕获的类型错误:_vm.validated 不是函数”， 显示验证是否正确并不重要

<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>

Answer 1

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

Directive attribute values are expected to be a single JavaScript expression

就我在您的示例中看到的情况而言，可能是您的单个文件组件与正确的结构不匹配。如果你看一下单个文件组件 guide

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

<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>