方式一:使用jQuery方法获取
1、直接给相应的元素加id,再使用document.getElementById("id");获取到该元素
<template>
<div class="app-container">
<el-button style="margin-top: 6px;" id="btn" @click="getDOM()">获取DOM元素</el-button>
</div>
</template>
<script>
export default {
methods: {
getDOM() {
const btns = document.getElementById('btn')
console.log(btns)
if (btns) { // 如果不给判断有可能会报错:TypeError: Cannot read property 'style' of null
btns.style.color = 'red'
}
}
}
}
</script>
如果不给if (btns)判断有可能会报以下错误
2、直接给相应的元素加class,再使用document.getElementsByClassName('filter-item');获取到该元素
<template>
<div class="app-container">
<el-button style="margin-top: 6px;" class="filter-item">点击获取DOM元素后改变字体颜色为红色</el-button>
<el-button style="margin-top: 6px;" class="filter-item" @click="getDOM()">获取DOM元素</el-button>
</div>
</template>
<script>
export default {
methods: {
getDOM() {
const btn = document.getElementsByClassName('filter-item')[1]
console.log(btn)
if (btn) { // 如果不给判断有可能会报错:TypeError: Cannot read property 'style' of null
btn.style.color = 'red'
}
}
}
}
</script>
方式二:使用ref方法获取
给相应的元素加ref="name",再使用this.$refs.name获取到该元素
<template>
<div class="app-container">
<el-button style="margin-top: 6px;" ref="btn" @click="getDOM()">获取DOM元素</el-button>
</div>
</template>
<script>
export default {
mounted() {
// 装载数据之后
this.btns = this.$refs.btn
},
methods: {
getDOM() {
console.log('方法一,使用mounted装载数据之后:')
console.log(this.btns.$el)
console.log('----------分----------割----------线----------')
console.log('方法二,直接使用this.$refs.btn.$el方法:')
console.log(this.$refs.btn.$el)
this.$refs.btn.$el.style.color = 'red'
}
}
}
</script>
获取 Input 值
<template>
<div class="app-container">
<el-input type="text" value="获取input值" ref="inputVal"/>
<el-button style="margin-top: 6px;" @click="get()">获取</el-button>
<br>
<span>{{ result }}</span>
</div>
</template>
<script>
export default {
data() {
return {
result: ''
}
},
methods: {
get: function () {
this.result = this.$refs.inputVal.value + " 成功!";
},
}
}
</script>