• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>

    1. 

      <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>
      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      
成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av 
  
      
    

      

	
      
		
      
			
      
				
      v-for生成多個div并給div中的組件綁定值
      
				
      
					
       2019-12-3      seo達人      
      
					
					
      
						
					
      
				
      
				
			
      
			
      
				
      實際業務比較復雜不便展示，寫一個簡單的demo記錄此功能

      


      
 

      


      
遍歷此div：

      


      
<div v-for="item in demoArray">

      
    <input type="text" v-model="item.name">

      
    <el-switch class="exio-switch" v-model="item.status" active-text="開" inactive-    text="關" active-color="#13ce66"></el-switch>

      
    <button @click="showInfo(item)">查看</button>

      
</div>

      
js代碼：

      


      
new Vue({

      
    el: '#app',

      
    data() {

      
        return {

      
            demoArray: [],

      
        };

      
    },

      
    created() {

      
        // 生成模擬數據

      
        for (let i = 0; i < 5; i++) {

      
            let e = {};

      
            e.name = "div"+i;

      
            e.status = true;

      
            this.demoArray.push(e);

      
        }

      
    },

      
    methods: {

      
        showInfo(item) {

      
            console.log(item.name);

      
            console.log(item.status);

      
        }

      
    }

      
})

      
頁面展示：

      


      


      


      
修改一條數據：

      


      


      


      
驗證雙向綁定結果：

      


      


      


      
為了解決不確定數量的數據（數據來源可能是接口等）的展示和操作，將每條數據作為元素放在數組中，通過數組中元素的屬性來進行雙向綁定。

      


      
整理的倉促，emmm，收工

      


      

      				
      
								
			
      
		
      
		
		
	
      


      
    
  
      
    
      日歷
      
    
      
        
      
        
    
      
  
      
    
    
      
      
      鏈接
      
      
        
                
      
    
      
    
      
      
      個人資料
      
      
      
          
      
                    
      
          
      藍藍設計的小編
          http://www.wtxcl.cn
      
      
      
    
      
    
      
      
      存檔