vue 操作 dom 的 3 个方法

vue 操作 dom 的 3 个方法

1. javascript 操作 dom 语法

    <template>
        <div>
            <p>通过javascript操作dom，使按钮文字变颜色</p>
            <button id="btn" @click="changeColor">javascript操作dom</button>
        </div>
    </template>
   
    <script>
    export default {
        methods:{
            changeColor(){
                const btn = document.getElementById("btn");
                btn.style.color = "red";
            }
        }
    }
    </script>
   

2. vue 自带的 ref 属性 操作 dom 语法

    <template>
        <div>
            <p>通过vue的ref属性操作dom，使按钮文字变颜色</p>
            <button ref="btn" @click="changeColor">vue的ref属性操作dom</button>
        </div>
    </template>
   
    <script>
    export default {
        methods:{
            changeColor(){
                this.$refs.btn.style.color = "blue";
            }
        }
    }
    </script>
   

3. 引用 jquery 操作 dom 语法

   不推荐使用jquery操作dom，因为jquery操作dom的方法是通过循环页面找到所有符合的元素，而vue是单页面的，若果使用jquery会产生歧义，因此不推荐使用。