使用vue點擊li,獲取當(dāng)前點擊li父輩元素的屬性值方法
更新時間:2018年09月12日 09:16:41 作者:code搬運工阿鐵
今天小編就為大家分享一篇使用vue點擊li,獲取當(dāng)前點擊li父輩元素的屬性值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
vue實現(xiàn)加載并展示后臺數(shù)據(jù)的tab選項卡
vue用于渲染頁面
jquery用于方法實現(xiàn)動態(tài)效果
<div class="content"> <!-- change方法, 數(shù)值改變觸發(fā) --> <select v-on:change="getData()" name="" id="dataSelect"> <option value="" v-bind:name="index" v-for="(value, index) in items">{{value.date}}</option> </select> <!-- 為name屬性添加當(dāng)前索引值 --> <ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow, i) in flows"> <li class="li1"> {{flow.name.fullName}}<br> {{flow.name.time}} </li> <li class="li2"> {{flow.val1}} </li> <li class="li3"> {{flow.val2}} </li> <li class="li4"> {{flow.val3}} </li> </ul> </div>
<script> var vm = new Vue({ el: "#app", data: { user: {}, items: [], flows: [] }, methods: { // 根據(jù)option數(shù)值替換數(shù)據(jù) getData: function() { var optionIndex = $('#dataSelect option:selected').attr("name"); //選中的值 vm.flows = vm.items[optionIndex].flowsMonth; }, toFlow: function(event) { // 點擊li獲取當(dāng)前l(fā)i父輩ul的name屬性值 var flowIndex = event.target.parentNode.getAttribute("name"); var flow = (vm.flows[flowIndex]); $.ajax({ url: 'php/test.php', type: 'POST', dataType: "json", data: { flow: flow }, success: function(data) { console.log(data); } }) } } }) $(function(){ $.ajax({ url: 'json/items.json', type: 'GET', dataType: "json", success: function(data) { vm.user = data.user; vm.items = data.flows; // 初始數(shù)據(jù) vm.flows = vm.items[0].flowsMonth; } }) }) </script>
{ "flows": [ { "date": "2017年5月", "flowsMonth": [ { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "200", "val2": "1.3", "val3": "2300" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "1", "val2": "2", "val3": "3" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "1", "val2": "2", "val3": "3" } ] }, { "date": "2017年6月", "flowsMonth": [ { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "200", "val2": "1.3", "val3": "2300" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "1", "val2": "22", "val3": "33" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "12", "val2": "32", "val3": "13" } ] } , { "date": "2017年8月", "flowsMonth": [ { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "200", "val2": "1.3", "val3": "2300" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "61", "val2": "542", "val3": "63" }, { "name": { "fullName": "xxx 10G", "time": "當(dāng)月有效" }, "val1": "51", "val2": "22", "val3": "34" } ] } ] }
以上這篇使用vue點擊li,獲取當(dāng)前點擊li父輩元素的屬性值方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10實例詳解Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格
這篇文章主要介紹了Vue項目使用eslint + prettier規(guī)范代碼風(fēng)格,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-08-08vue2利用Bus.js如何實現(xiàn)非父子組件通信詳解
這篇文章主要給大家介紹了關(guān)于vue2利用Bus.js如何實現(xiàn)非父子組件通信的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08vue.js分頁中單擊頁碼更換頁面內(nèi)容的方法(配合spring springmvc)
下面小編就為大家分享一篇vue.js分頁中單擊頁碼更換頁面內(nèi)容的方法(配合spring springmvc),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue+webpack模擬后臺數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺數(shù)據(jù)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07