第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

vue v-if 動態(tài)傳值

vue v-if 動態(tài)傳值

汪汪一只貓 2022-12-02 16:29:18
我是 vue 的新手，這是我第一次嘗試將 VUE 視為OOP。有沒有辦法動態(tài)定義 v-if ？現(xiàn)在我正在起訴 fetch[1]、fetch[2] 和 fetch[3] 來運行v-if. 稍后我可能有超過20 div，在那種情況下我不想定義為 fetch[1]、fetch[2]...fetch[20]。有沒有辦法將 fetch[1] 的變量設置為 fetch[x] 并且對于每個 div 它將以 1 遞增：fetch[1] = fetch[x]  fetch[2] = fetch[x+1]  fetch[3] = fetch[x+1+1]看法 <div v-if="fetch[1] > '0'" >    <p> DIV 1 </p> </div>  <div v-if="fetch[2] > '0'" >    <p> DIV 2 </p> </div>  <div v-if="fetch[3] > '0'" >    <p> DIV 3 </p> </div>腳本 mounted(){  var totalBoxes = '3';   for(let b=0; b < totalBoxes; b++){    var replyDataObj1 = b;            replyDataObj1={             "route_id" : b           }     this.toListFetch= replyDataObj1; /** this will collect all the data from fetch as a list **/    this.fetch.push(this.toListFetch);  /** list from toListFetch will be pushed to this.fetch **/  }  },  data() {       return {         fetch:[],         toListFetch: ''       }     }下面是我上傳的代碼JSFIDDLEhttps://jsfiddle.net/ujjumaki/beaf9tvh/9/
查看完整描述

3 回答

?
白衣非少年

TA貢獻1155條經(jīng)驗 獲得超0個贊

你想使用 v-for 循環(huán)來渲染 div，并寫一次條件：


模板：


  <template v-for="(value, index) in fetch">

    <div v-if="value > 0" >

      <p> DIV {{ index + 1 }} </p>

    </div>

  </template>

如果要使用數(shù)組的一部分，從 X 索引開始到 X+Y 索引結(jié)束，請使用 array.splice 并迭代新數(shù)組（從索引 1 開始并獲取以下 3 個索引）：


let filteredFetch = fetch.splice(1, 4);

模板：


  <template v-for="(value, index) in filteredFetch">

    <div v-if="value > 0" >

      <p> DIV {{ index + 1 }} </p>

    </div>

  </template>


查看完整回答
反對 回復 2022-12-02
?
BIG陽

TA貢獻1859條經(jīng)驗 獲得超6個贊

解耦的方法是控制數(shù)據(jù)——在這種情況下不要弄亂v-ifs，使用計算屬性（或方法，如果你需要比這更復雜的話）：


new Vue({

  el: "#app",

  data: {

    nextNumber: null,

    fetch: []

  },

  computed: {

    filteredFetch3() {

      // the v-if is solved here with a filter

      return this.fetch.filter(e => e > 3)

    },

    filteredFetch5() {

      // the v-if is solved here with a filter

      return this.fetch.filter(e => e > 5)

    }

    

  },

  methods: {

    pushNumber() {

      this.fetch.push(Number(this.nextNumber))

      this.nextNumber = null

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <label for="numberInput">

  Number input: <input id="numberInput" v-model="nextNumber" /><button @click="pushNumber">ADD NUMBER TO FETCH LIST</button>

</label>

  <hr /> FETCH (ALL THE FETCHED NUMBERS APPEAR HERE):

  <br /> {{ fetch }}

  <hr /> ONLY NUMBERS ABOVE 3 WILL APPEAR IN THIS LIST:

  <ul>

    <li v-for="(number, i) in filteredFetch3" :key="`${ number }-${i}`">

      {{ number }}

    </li>

  </ul>

  <hr /> ONLY NUMBERS ABOVE 5 WILL APPEAR IN THIS LIST:

  <ul>

    <li v-for="(number, j) in filteredFetch5" :key="`${ number }-${j}`">

      {{ number }}

    </li>

  </ul>

</div>


查看完整回答
反對 回復 2022-12-02
?
MM們

TA貢獻1886條經(jīng)驗 獲得超2個贊

我不知道這是你想要實現(xiàn)的，但這是我的理解，請檢查 jsfiddle 中的這段代碼以及它的外觀：

 new Vue({

      el: "#app",

      mounted(){


      var totalBoxes = 10;


      for(let b=0; b < totalBoxes; b++){

        var replyDataObj1 = b;


              replyDataObj1={

                "route_id" : b

              }

       this.toListFetch= replyDataObj1; /** this will collect all the data from fetch as a list **/

       this.fetch.push(this.toListFetch);  /** list from toListFetch will be pushed to this.fetch **/

       }


      },


      data() {

         return {

           fetch:[],

           toListFetch: ''

         }

       },


       computed: {

         filteredBoxes() {

           // Computed property to return only fecth where route_id is greater than 0

           return this.fetch.filter(f => f["route_id"] > 0);

         }

       }

    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

      <p>

      Filtered boxes

      </p>

      <div v-for="(f, indexFiltered) in filteredBoxes" :key="indexFiltered">

        DIV {{ f.route_id }}

      </div>

    </div>

計算屬性非常適合從數(shù)據(jù)屬性中的項目中查找或過濾



查看完整回答
反對 回復 2022-12-02
  • 3 回答
  • 0 關注
  • 462 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號