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


    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



     

  • 相关阅读:
    python 之字符编码
    python文件处理
    迭代器和生成器
    内置函数和匿名函数
    函数之递归
    函数 之装饰器
    python 函数进阶与闭包
    python 之 函数
    python之运算符
    python字符串内置方法
  • 原文地址:https://www.cnblogs.com/CESC4/p/7761197.html
Copyright © 2020-2023  润新知