在vue中獲取dom元素內(nèi)容的方法
更新時間：2017年07月10日 14:10:02 作者：xiaogezl
本篇文章主要介紹了在vue中獲取dom元素內(nèi)容的方法，可以通過給標簽加ref屬性，這里整理了詳細的代碼,有興趣的可以了解一下
在vue中可以通過給標簽加ref屬性，就可以在js中利用ref去引用它，從而操作該dom元素，以下是個例子，可以當做參考
<template>
<div>
<div id="box" ref="mybox">
DEMO
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
this.init();
},
methods:{
init() {
const self = this;
this.$refs.mybox.style.color = 'red';
setTimeout(() => {
self.$refs.mybox.style.color = 'blue';
},2000)
}
}
}
</script>
<style scoped>
#box {
width: 100px;
height: 100px;
line-height: 100px;
font-size: 20px;
text-align: center;
border: 1px solid black;
margin: 50px;
color: yellow;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
淺析vue cli3 封裝Svgicon組件正確姿勢(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
Vue.js是構(gòu)建Web界面的漸進式JavaScript框架,通過簡潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關(guān)于Vue.js中讓人容易忽略的API的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)倒計時小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue工程全局設置ajax的等待動效的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue使用微信JS-SDK實現(xiàn)分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue數(shù)據(jù)雙向綁定原理解析（get & set)
這篇文章主要為大家詳細解析了vue.js數(shù)據(jù)雙向綁定原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue項目設置scrollTop不起作用(總結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12