vue2 如何操作dom

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，以下是个例子，可以当做参考

[html] view plain copy
    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.     font-size: 20px;  
    38.     text-align: center;  
    39.     border: 1px solid black;  
    40.     margin: 50px;   
    41.     color: yellow;  
    42.   }  
    43. </style> 
posted @ 2017-06-16 14:13  Lonely,lonelyBurning  阅读(776)  评论(0)  编辑  收藏  举报