当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 使用vue点击li,获取当前点击li父辈元素的属性值方法

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

讲师介绍,过客生活志,国模薛婧

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网