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

vue实现加载并展示后台数据的tab选项卡vue用于渲染页面jquery用于方法实现动态效果<divclass

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

vue用于渲染页面

jquery用于方法实现动态效果

<div class="content">
	
	<!-- change方法, 数值改变触发 -->
	<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属性添加当前索引值 -->
	<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: {
 // 根据option数值替换数据
 getData: function() {
 var optionIndex = $('#dataSelect option:selected').attr("name"); //选中的值
 vm.flows = vm.items[optionIndex].flowsMonth;
 },
 toFlow: function(event) {
 // 点击li获取当前li父辈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;
 // 初始数据
 vm.flows = vm.items[0].flowsMonth;
 }
 })	
	})
</script>

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

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