使用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 中令人困惑的变量赋值
Aug 13 Javascript
javascript下IE与FF兼容函数收集
Sep 17 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
Less 安装及基本用法
May 05 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
在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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
vue使用nprogress实现进度条
2019/12/09 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
优秀党员主要事迹
2014/01/19 职场文书
公司周年庆活动方案
2014/08/25 职场文书
小学毕业教师寄语
2019/06/21 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
css3带你实现3D转换效果
2022/02/24 HTML / CSS
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸