问题:
在 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="请添加子菜单" 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="'请添加子菜单'" v-if="menu.type == 3" readonly>
<!--不显示-->
<input type="text" value="请添加子菜单" 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...
补充:测试后发现只有多个input,且input中有一个或多个使用v-model绑定后,会出现此问题,如果全部是value则没有问题。
https://jsfiddle.net/ge0ms515/1/
可以啊,以后这种场景简单的问题,请做在线demo出来,更容易问
补充一个猜想:
因为vue会有一个dom复用的算法,它不会去重复插入dom。在解析到v-if的时候,可能没有把这个节点的原生value属性保存起来