Question

我有一个需要使用模型的输入，具体取决于模型的值。

这基本上就是我所需要的：

<input v-if"modelOne == ''" v-model="modelOne">
<input v-else               v-model="modelTwo">

除了我在输入中键入的内容之外，modelOne不再是空字符串，因此v-model更改为modelTwo。

如何使它仅在加载输入时检查modelOne的值，而不进行其他检查？

注意：这是动态输入列表的简化版本。每个输入将使用不同的模型row.modelOne / row.modelTwo，输入列表将更改。

Answer 1

您应该使用watch属性来拥有旧值和新值，并在数据对象中添加一个布尔项，如下所示：

    data(){
         return{ 
            isModelOne:false,
            modelOne:'',
         }
      }

观看属性：

      watch:{
            modelOne(newval,oldval){
                 oldval==''?this.isModelOne=true:this.isModelOne=false;  
                }
           }

模板：

     <input v-if="isModelOne" v-model="modelOne">
     <input v-else               v-model="modelTwo">

另一种可能有用的方法是使用.lazy修饰符，该修饰符将在模糊输入后更新绑定项：

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      modelOne: '',
      modelTwo: 'model two'
    }
  }
});

.two{
border-radius:20px;
border:2px solid #ff55aa!important;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <input v-if= "modelOne == ''" v-model.lazy="modelOne" class="form-control"/>
  
  <input v-else v-model="modelTwo" class="form-control two" />
  <input value="three" class="form-control"/>
</div>

如何在更改模型之前检查模型是否为空？

1 个答案: