vue獲取頁面元素

html代碼

<div id="app">

<h3 v-if="tab==1">首頁</h3>
<h3 v-else-if="tab==2">個人中心</h3>
<h3 v-else>其他區域</h3>

<button @click="ChangText" data-id='1' data-consone='wsh3' abc-one='sgsdfd'>首頁</button>
<button @click="ChangText" data-id='2' data-consone='wshi2'>個人中心</button>
<button @click="ChangText" data-id='3' data-consone='wshi'>其他區域</button>

</div>

js代碼

<script type="text/javascript">
let app=new Vue(
{
el:"#app",
data:
{
username:"張山",
isflag:false,
tab:1
},
methods:
{
ChangText:function(e)
{
console.log(e);
console.log(e.target.dataset.consone)
//alert(e.target.id);
this.tab=e.target.dataset.id;
}
}
})

</script>

 

html綁定元素只能用data-名稱

獲取的時候通過事件的e.target.dataset.名稱獲取

如果html元素上的元素不是以data開頭，則無法獲取