Vue可以通過使用v-bind指令或簡寫符號“:”來獲取DOM元素的屬性,還可以在模板中使用插值語法{{}},它們都是Vue中獲取屬性的常用方法。
使用v-bind指令綁定屬性:
<div v-bind:id="dynamicId"></div>
new Vue({
el: '#app',
data: {
dynamicId: 'myDiv'
}
});
使用簡寫符號“:”綁定屬性:
<div :id="dynamicId"></div>
new Vue({
el: '#app',
data: {
dynamicId: 'myDiv'
}
});
使用插值語法{{}}獲取屬性:
<div id="{{dynamicId}}"></div>
new Vue({
el: '#app',
data: {
dynamicId: 'myDiv'
}
});
除了上述方法,Vue還提供了一些屬性綁定的修飾符,例如:
// 阻止事件冒泡
<a v-on:click.stop href="#">阻止冒泡</a>
// 阻止默認事件
<form v-on:submit.prevent>阻止默認事件</form>
// 捕獲事件
<div v-on:mousedown.capture>鼠標捕獲</div>
總之,Vue提供了多種方法來獲取DOM元素的屬性,也為我們提供了屬性綁定的修飾符,可以根據實際情況選擇適合的方法。
上一篇vue獲取當前dom