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


Posted in Javascript onSeptember 12, 2018

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

Javascript 相关文章推荐
JavaScript基础知识学习笔记
Dec 02 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 #Javascript
You might like
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
python中xrange用法分析
2015/04/15 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python 编程速成(推荐)
2019/04/15 Python
Python如何计算语句执行时间
2019/11/22 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
大专学生推荐信范文
2013/11/19 职场文书
会计自我鉴定
2014/02/04 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
地道战观后感
2015/06/04 职场文书
九年级历史教学反思
2016/02/19 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android