【Vue】value值如何通过{{}}获取？答：【:value="item.value"】或者【v-bind:value="item.value"】...

最新推荐文章于 2024-06-11 22:32:38 发布

转载最新推荐文章于 2024-06-11 22:32:38 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CESC4/p/7761197.html

文章标签：

#javascript #前端 #ViewUI

本文介绍如何使用Vue.js创建动态列表，并从本地存储中加载历史记录数据。通过解析本地存储的数据，将其转换为Vue组件可以使用的格式，实现列表项的自动勾选功能。

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

转载于:https://www.cnblogs.com/CESC4/p/7761197.html