鍍金池/ 問答/HTML/ vuejs中多個input使用v-if和v-model后,未使用v-model的

vuejs中多個input使用v-if和v-model后,未使用v-model的input項value值不顯示

問題:
在 vuejs 中,使用 v-if 指令來控制 input 標簽的顯示,并且有 value 值作為默認顯示, value 值不需要通過 vuejs 來控制,但使用 value 時該值在 DOM 中可看到卻不顯示。只有使用 :value 綁定時才可以顯示。這是 vuejs 的特定要求?

代碼:

HTML

<div id="app">
  <input type="text" v-model="menu.key" v-if="menu.type == 1" >
  <input type="text" v-model="menu.url" v-if="menu.type == 2" >
  <input type="text" value="請?zhí)砑幼硬藛? v-if="menu.type == 3" readonly>
  <button @click="toggle(1)">1</button>
  <button @click="toggle(2)">2</button>
  <button @click="toggle(3)">3</button>
</div>

<!--顯示-->
<input type="text" :value="'請?zhí)砑幼硬藛?" v-if="menu.type == 3" readonly>
<!--不顯示-->
<input type="text" value="請?zhí)砑幼硬藛? v-if="menu.type == 3" readonly>

JS

new Vue({
  el: '#app',
  data: {
    show: true,
    menu: {
      type: 1,
      key: '1',
      url: '2'
    }
  },
  methods: {
    toggle(t) {
      switch (t) {
        case 1:
          this.menu.type = 1;
          break;
        case 2:
          this.menu.type = 2;
          break;
        case 3:
          this.menu.type = 3;
          break;
      }
    }
  }
})

demo地址:
http://runjs.cn/code/y2r6weqh

https://jsfiddle.net/trlanfen...

補充:測試后發(fā)現(xiàn)只有多個input,且input中有一個或多個使用v-model綁定后,會出現(xiàn)此問題,如果全部是value則沒有問題。

回答
編輯回答
近義詞

https://jsfiddle.net/ge0ms515/1/
可以啊,以后這種場景簡單的問題,請做在線demo出來,更容易問

補充一個猜想:
因為vue會有一個dom復用的算法,它不會去重復插入dom。在解析到v-if的時候,可能沒有把這個節(jié)點的原生value屬性保存起來

2017年12月13日 11:14