Vue用v-if设置2个条件

Question

我在练习 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>

Answer 1

我建议将您的逻辑放在脚本部分中，并且只调用模板中的属性和方法：

   <form v-if="validated">
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />
  </form>

计算属性 'validated' 将检查提供的输入，如果存在则返回一个布尔值：

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

new Vue({
  el: '#app',

  data() {
    return {
      user: '',
      password: ''
    }
  },
  computed: {
    validated() {

      if (!this.user && !this.password) {
        return true;
      } else if (this.user !== 'name') {
        if (!this.password) return true
        else if (this.password !== '111') return true
        else return false

      } else if (this.user == 'name') {
        if (!this.password) return true
        else if (this.password !== '111') return true
        else return false
      } else if (this.password !== '111') {
        if (!this.user) return true
        else if (this.user !== 'name') return true
        else return false

      } else if (this.password == '111') {
        if (!this.user) return true
        else if (this.user !== 'name') return true
        else return false
      }
    }
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<!-- Add this after vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>



<div id="app" class="container">
  <div v-if="validated">
    <form>
      <label>User</label>
      <input type='text' v-model.lazy='user' required />
      <label>Password</label>
      <input type='password' v-model.lazy='password' required />

    </form>
  </div>
  <div v-else>
    <p>Error !</p>
  </div>
</div>

Answer 2

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

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

对于我在您的示例中看到的情况，您的单个文件组件可能与正确的结构不匹配。如果你看一下单文件组件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>

Answer 3

您是否尝试过为完​​整的表格创建flag

更新：

<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 @click='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,
    };
  },
  methods(): {
    validated() {
      if (this.user == 'name' &&  this.password == '111') {
         this.is_validated = false
      }
    }
  },
};
</script>