Question

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

那么基本上可以使用&&设置两个条件，还是应该以其他不同的方式进行设置？

更新后的完整代码：

我尝试了3种方法，分别是模板，方法和计算方法，它们全部只检查一个条件

与您的帮助人员一起，我进行了一些修改，现在可以使用了！非常感谢大家的帮助，但最后一件事是，在控制台日志中它向我显示：“未捕获的TypeError：_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中指令的官方文档

指令属性值应该是单个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 2

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

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

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

3 个答案: