首页 > 编程 > JavaScript > 正文

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

2019-11-19 12:58:06
字体:
来源:转载
供稿:网友

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父辈元素的属性值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表