在vue中操作dom元素

在vue中可以通過給標簽加ref屬性，就可以在js中利用ref去引用它，從而達到操作該dom元素，以下是個參考例子

 1 <template>
 2 <div>
 3 <div id="box" ref="mybox">
 4 DEMO
 5 </div>
 6 </div>
 7 </template>
 8 
 9 <script>
10 export default {
11 data () {
12 　　return {
13 
14 }
15 },
16 mounted () {
17 　　this.init();
18 },
19 methods:{
20 　init() {
21 　　const self = this;
22 　　this.$refs.mybox.style.color = 'red';
23 　　setTimeout(() => {
24 　　　　self.$refs.mybox.style.color = 'blue';
25 　　},2000)
26 }
27 }
28 
29 }
30 </script>
31 
32 <style scoped>
33 #box {
34 width: 100px;
35 height: 100px;
36 line-height: 100px;
37 text-align: center;
38 border: 1px solid black;
39 margin: 50px; 
40 color: yellow;
41 }
42 </style>