var historyList = new Vue({ el: '#historyList', data: { items: [ //{text:'3000噸以下',value:'0-3000'}, //{text:'5000噸 至 1.0w噸',value:'5000-10000'}, //{text:'55噸 至 88噸',value:'55-88'} ] } }) <ul id="historyList" >
<li v-for="item in items" class="tonList">
<input type="checkbox" :value="item.value"/>
<label>{{item.text}}</label>
</li>
</ul>
function getHistory() { var data = localStorage.getItem('tonnage_history'); if (data != '' && data != null) { // dataTextAndValue {3000噸 至 5000噸,5000噸 至 1.0w噸,4噸 至 8噸:3000-5000,5000-10000,4-8}
var dataTextAndValue = data.split(':'); // dataText [3000噸 至 5000噸,5000噸 至 1.0w噸,4噸 至 8噸]
var dataText = dataTextAndValue[0].split(','); // dataValue [3000-5000,5000-10000,4-8]
var dataValue = dataTextAndValue[1].split(','); var dataItem=new Array(); for(var i=0;i<dataText.length;i++){ dataItem[i]={text:dataText[i],value:dataValue[i]} } // dataItem
// [ {text:'3000噸以下',value:'0-3000'},
// {text:'5000噸 至 1.0w噸',value:'5000-10000'},
// {text:'55噸 至 88噸',value:'55-88'}]
historyList.items=dataItem; } else { } console.log(data); console.log(dataItem); console.log(historyList.items); }
【1】 <input type="checkbox" :value="item.value"/>
不是用雙括號,直接用引號包圍就行,前邊加個冒號
【:】相當於【v-bind:】
【2】 for(var i=0;i<dataText.length;i++){
dataItem[i]={text:dataText[i],value:dataValue[i]} }
js的數組還可以這樣用,牛逼!
https://cn.vuejs.org/v2/api/#v-bind