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

3 回答

• 1

  你有一些错过的结束标签和 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 数据 .

  回复于 2024-05-14T11:45:14+08:00
• 0

  该模板有一些编译错误：

  • <label> 需要一个结束标记（文本内容有用）

  • <div class="big"> 需要一个结束标记

  • v-if 绑定到 inputFieldInfo ，但该变量被声明为 InputFieldInfo （注意大写 I ），但根据您的行为描述，此字段对于每个位置容器应该是唯一的，因此像这样的单个数据属性将不起作用（如果我理解你的描述正确） .

  ---

  每个位置容器应该有一个变量来包含位置名称（例如， locationName ）和另一个变量以包含 <input> 和 <label> （即 inputFieldInfo ）的show / hide布尔值：

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

  然后，我们可以将 div.inputFieldInfo 和 div.locationName 绑定到 <input> . 我们绑定到 v-model ，以便用户的文本自动反映到 div.locationName 变量：

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

  <label> 的内容应为 div.locationName ，以便在显示时包含 <input> 中的文本：

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

  要在单击展开按钮时使用 <label> 切换 <input> ，我们更新 expand() 以将 div.inputFieldInfo 设置为 false 但仅当 div.locationName 不为空时（这使用户有机会重新访问/重新展开容器以填充位置以后如果需要）：

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

  updated jsfiddle

  回复于 2024-05-14T11:45:14+08:00
• 0

  你可以通过使用像这样的切换变量来做到这一点

  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',
  });
  

  在这个例子中，我们只是在click上输入takeinput的值，因此根据值显示标签或输入 .

  这是非常基本的例外 . 但您可以根据需要扩展它

  回复于 2024-05-14T11:45:14+08:00