vuejs中多个input使用v-if和v-model后,未使用v-model的input项value值不显示

0 0 vue.js
爬墙丶等红杏
爬墙丶等红杏

声望值:79 0人

2018-08-08 15:19:34 提问

关注 0关注

收藏 0收藏, 1799浏览

问题:
在 vuejs 中,使用 v-if 指令来控制 input 标签的显示,并且有 value 值作为默认显示, value 值不需要通过 vuejs 来控制,但使用 value 时该值在 DOM 中可看到却不显示。只有使用 :value 绑定时才可以显示。这是 vuejs 的特定要求?

代码:

HTML


1 2 3

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则没有问题。

请先 登录 后评论

1个回答

  • 苏颜。81声望 2018-08-08 11:44

    https://jsfiddle.net/ge0ms515/1/可以啊,以后这种场景简单的问题,请做在线demo出来,更容易问 补充一个猜想:因为vue会有一个dom复用的算法,它不会去重复插入dom。在解析到v-if的时候,可能没有把这个节点的原生value属性保存起来
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问