zoukankan      html  css  js  c++  java
  • 【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



     

  • 相关阅读:
    HDU 6071
    HDU 6073
    HDU 2124 Repair the Wall(贪心)
    HDU 2037 今年暑假不AC(贪心)
    HDU 1257 最少拦截系统(贪心)
    HDU 1789 Doing Homework again(贪心)
    HDU 1009 FatMouse' Trade(贪心)
    HDU 2216 Game III(BFS)
    HDU 1509 Windows Message Queue(队列)
    HDU 1081 To The Max(动态规划)
  • 原文地址:https://www.cnblogs.com/CESC4/p/7761197.html
Copyright © 2011-2022 走看看