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开头，则无法获取