使用vue點擊li,獲取當前點擊li父輩元素的屬性值方法
更新時間：2018年09月12日 09:16:41 作者：code搬運工阿鐵
今天小編就為大家分享一篇使用vue點擊li,獲取當前點擊li父輩元素的屬性值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue實現加載并展示后臺數據的tab選項卡
vue用于渲染頁面
jquery用于方法實現動態(tài)效果
<div class="content">
<!-- change方法, 數值改變觸發(fā) -->
<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獲取當前l(fā)i父輩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父輩元素的屬性值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了淺談Vue組件單元測試究竟測試什么，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
在Vue 3中,前端無法直接將Word文檔轉換為PDF,因為Word文檔的解析和PDF的生成通常需要在后端進行這篇文章主要介紹了Vue3實現word轉成pdf代碼的方法,需要的朋友可以參考下,2023-07-07
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
這篇文章較詳細的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數據。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
vue+Vue Router多級側導航切換路由(頁面)的實現代碼
這篇文章主要介紹了vue+Vue Router多級側導航切換路由(頁面)的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了VUE 數組更新問題，文中給大家介紹了vue如何監(jiān)聽數據的變化的 ,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue2和vue3實現圖片懶加載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
單元測試是用來測試項目中的一個模塊的功能，本文主要介紹了前端Vue單元測試入門教程，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue開發(fā)移動端使用better-scroll時click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動端使用better-scroll時click事件失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關于vue3?api自動導入的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02