使用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 写类方式之三
Jul 05 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
解决vue addRoutes不生效问题
Aug 04 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
菜鸟修复电子管记
2021/03/02 无线电
php多层数组与对象的转换实例代码
2013/08/05 PHP
php生成扇形比例图实例
2013/11/06 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
js加强的经典分页实例
2013/03/15 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
基于Python的PIL库学习详解
2019/05/10 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
物业管理计划书
2014/01/10 职场文书
重阳节登山活动方案
2014/02/03 职场文书
大学生团日活动总结
2015/05/06 职场文书
学校元旦晚会开场白
2015/05/29 职场文书