使用vue点击li,获取当前点击li父辈元素的属性值方法

vue实现加载并展示后台数据的tab选项卡

vue用于渲染页面

jquery用于方法实现动态效果

rush:js;">

<!-- change方法,数值改变触发 --> <select v-on:change="getData()" name="" id="dataSelect"&gt; <option value="" v-bind:name="index" v-for="(value,index) in items"&gt;{{value.date}}</option> </select> <!-- 为name属性添加当前索引值 --> <ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow,i) in flows"&gt; <li class="li1"&gt; {{flow.name.fullName}}<br> {{flow.name.time}} </li> <li class="li2"&gt; {{flow.val1}} </li> <li class="li3"&gt; {{flow.val2}} </li> <li class="li4"&gt; {{flow.val3}} </li> </ul>

rush:js;">

rush:js;"> { "flows": [ { "date": "2017年5月","flowsMonth": [ { "name": { "fullName": "xxx 10G","time": "当月有效" },"val1": "200","val2": "1.3","val3": "2300" },{ "name": { "fullName": "xxx 10G","val1": "1","val2": "2","val3": "3" },"val3": "3" } ] },{ "date": "2017年6月","val2": "22","val3": "33" },"val1": "12","val2": "32","val3": "13" } ] },{ "date": "2017年8月","val1": "61","val2": "542","val3": "63" },"val1": "51","val3": "34" } ] } ] }

以上这篇使用vue点击li,获取当前点击li父辈元素的属性值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。