vue:如何使用v-if在显示输入和标签之间切换

模板有一些编译错误:

• 这个 <label> 需要一个结束标记(以及有用的文本内容)
• 这个 <div class="big"> 需要结束标记
• 这个 v-if 是注定的 inputFieldInfo ,但该变量声明为 InputFieldInfo (注意大写 I

每个位置容器都应该有一个变量来包含位置名称(例如, locationName )以及另一个变量,用于包含 <input> 和 <标签> (即, 输入字段信息 ):

createDiv: function() {
  this.divs.push({
          // ...
          inputFieldInfo: true,
          locationName: ''
        });
}

然后,我们可以 div.inputFieldInfo 和 div.locationName 到 <输入> . 我们必须 v-model 以便用户的文本自动反映到 分区位置名称 变量:

<input v-if="div.inputFieldInfo" v-model="div.locationName">

这个 <标签> 的内容应为 分区位置名称 以便它包含来自 <输入> 显示时:

<label class="propertyLabel" v-else>{{div.locationName}}</label>

切换 <输入> 与 <标签> 当点击expand按钮时,我们更新 expand() 设置 分部输入字段信息 到 false 但只有当 分区位置名称 不为空(这使用户有机会重新访问/重新扩展容器,以便在以后需要时填充该位置):

expand: function(div) {
  if (div.expanded) {
    div.expanded = false
    if (div.locationName) {
      div.inputFieldInfo = false
    }
    // ...

updated jsfiddle

您可以使用这样的切换变量

Vue.component('addingdivs', {
    template: `
    <div>
       <div>
        <input type="text" v-if="takeinput">
        <label v-if="!takeinput">
        <button @click="toggleInput()">
        </div>
    </div>
    `,

 data: function() {
        return {
            takeinput:true,           
        }
    },

    methods: {
        toggleInput: function(){
            let vm = this;
            vm.takeinput = ( vm.takeinput == true) ? false : true
            }
        }
});

new Vue({

    el: '#lotsOfDivs',
});

在本例中,我们只是在单击时切换takeinput的值,因此将根据值显示label或input。

这是非常基本的例子。但你可以根据需要延长

您有一些丢失的结束标记和错误 InputFieldInfo i .

var gate = 0;

Vue.component('addingdivs', {
  template: `
<div>
    <div id="header">
        <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
    </div>
    <div class="parent" v-for="div in divs" :style=" div.height ? { 'height': div.height }: null">
        <div class="big" v-if="div.expanded" :key="'expanded' + div.id">
          <div class="switch">
              <input type="text" v-if="inputFieldInfo">
              <label class="propertyLabel" v-else>Label</label>

              <div class="firstChild">
                  <button class="done" @click="increaseLimit">INCREASE</button>
              </div>
              <div class="secondChild">
                  <button class="done" @click="expand(div)">EXPAND</button>
              </div>
          </div>
        </div>

        <div class="small" v-else :key="'collapsed' + div.id">
            <button class="done" @click="expand(div)">EXPAND</button>
        </div>
    </div>
</div>
    `,
  data: function() {
    return {
      gate: gate,
      height: "",
      count: 0,
      locationsArr: ["one", "two", "three"],
      divs: [],
      inputFieldInfo: true
    }
  },
  methods: {
    expand: function(div) {
        this.inputFieldInfo = false
      if (div.expanded) {
        div.expanded = false
        this.height = ''
      } else {
        div.expanded = true
        this.height = '7vh'
      }
    },
    createDiv: function() {
                this.inputFieldInfo = true
      if (this.count <= gate) { // Here you can decide how many divs that will be generated
        // this.count++;
        this.divs.push({
          id: this.count,
          expanded: true,
          inputFieldInfo: true,
          height: '',
        });
        this.count++
      }
    },

    increaseLimit: function() {
      // Here you can increase the number of divs that it's possible to generate
      gate++;
    }
  }
});

new Vue({

  el: '#lotsOfDivs',
});

你只是简单地切换 inputFieldInfo 每次按下按钮时的数据。