在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 {
- 100px;
- height: 100px;
- line-height: 100px;
- font-size: 20px;
- text-align: center;
- border: 1px solid black;
- margin: 50px;
- color: yellow;
- }
- </style>