zoukankan      html  css  js  c++  java
  • vue2 如何操作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.      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
  • 相关阅读:
    Js内存泄漏的几种情况
    简单工厂模式
    单例模式
    设计模式简介
    百度地图api-动态添加覆盖物
    ArcGIS发布地图服务后直接调用查看方法
    NetCDF 共享软件 中文
    Oracle服务器重命名
    NETCDF入门
    Oracle11gExpress和PL/SQL Developer安装
  • 原文地址:https://www.cnblogs.com/sxz2008/p/7027281.html
Copyright © 2011-2022 走看看