使用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 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 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
PHP网上调查系统
2006/10/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP运行模式的深入理解
2013/06/03 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python变量类型知识点总结
2019/02/18 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
"引用"与多态的关系
2013/02/01 面试题
高考自主招生自荐信
2013/10/20 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
文明风采获奖感言
2014/02/18 职场文书
大学军训感言600字
2014/02/25 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
行政司机岗位职责
2015/04/10 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
2016五一手机促销广告语
2016/01/28 职场文书