vue.js 怎么获取 dom 元素? 下面本篇文章给大家介绍一下 vue.JS 获取 dom 元素的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
使用 Vue.JS 获取 dom 元素
标签中添加 ref 属性, 相当于 id
在 Vue 中通过 $refs.ref 的属性名 获取或者设置 dom 元素
- <div id="demo">
- <button @click="fn"> 点击这里 </button>
- <div ref="box" style="width:200px;height:300px"> 西南交大 </div>
- </div>
- <script src="./node_modules/vue/dist/vue.js"></script>
- <script>
- new Vue({
- el: "#demo",
- data: {
- },
- methods: {
- fn:function(){
- console.log(this.$refs.box);
- console.log(this.$refs.box.innerText);
- console.log(this.$refs.box.style.width);
- this.$refs.box.style.backgroundColor="red"
- }
- }
- })
- </script>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17294.html