VUE操作DOM獲取HTML、刪除HTML、插入HTML

本文轉載自查看原文 2020-06-28 10:18 5124 VUE/ 前端

獲取HTML方法一：比較原始，直接用dom的方式 document.queryselector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue學習</title>
</head>
<body>
<div id="vue_click">
    <input type="button" value="Dom點擊按鈕" id="dom_get_click">
    <input type="button" value="Vue點擊按鈕" v-on:click="show">
    <div>{{message}}</div>

</div>

<script>

    var a = document.querySelector("#vue_click");
    console.log("aaaa:", a)

</script>
</body>
</html>

獲取HTML方法2：VUE的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue學習</title>
</head>
<body>
<div id="app" ref="app">
    <input type="button" value="Vue點擊按鈕" v-on:click="show">

</div>

<!--開發雲vue.js-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生產環境版本，優化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
<!--<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>-->
<script src="axios.js"></script>
<script>

    var app = new Vue({
        el:"#app",
        methods:{
          show:function () {
              console.log(this.$refs.app)
          }
        }

    })

</script>
</body>
</html>

VUE刪除HTML

https://www.cnblogs.com/renfanzi/p/13197803.html#_label10

直接用v-if: status來就OK了，直接把HTML就刪除了，簡單省事， 但這種方法不好
有三種方法：
　　1. v-if
　　2. dom document.getElementId().remove
　　3. vue的方法（暫時沒找到那個函數）

方法1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue學習</title>
</head>
<body>

<div id="app">
    <div>
        <button v-on:click="change_true">點擊生成</button>
        <button v-on:click="change_false">點擊消失</button>
    </div>
    <p></p>
    <p></p>
    <p></p>

    <div>
        <p v-show="status"> v-show 數據展示</p>
        <p v-if="status"> v-if 數據展示</p>
    </div>
</div>
<!--開發雲vue.js-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生產環境版本，優化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            status:true
        },
        methods:{
            change_true:function () {
                this.status = true
            },
            change_false:function () {
                this.status = false
            }
        }
    })

</script>
</body>
</html>

View Code

方法2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue學習</title>
</head>
<body>
<div id="app">
    <p>hello world!</p>
    <div v-html="message" id="app_child"></div>
</div>

<script src="vue.js"></script>
<script>
    var app=document.getElementById("app");
    // 刪除整個div
    // app.remove();
    // 刪除div下面子div元素
    app.removeChild(document.getElementById("app_child"));

</script>
</body>

</html>

dom方式

方法3：

VUE插入HTML

https://www.cnblogs.com/renfanzi/p/13197803.html#_label5

插入html，直接用v-html就可以

<body>
<div id="app">
    <div v-html="message"></div>
</div>

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"<a href='http://www.baidu.com'><img src='ecfb.jpg' alt=''></a>"
        }
    })

</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 DOM操作之獲取HTML、文本和值 jquery 操作dom效率測試------html和append插入文檔添加或刪除 HTML dom元素原生js操作HTML DOM 原生js操作HTML DOM vue 動態插入渲染html JS獲取HTML DOM元素的方法 VBS腳本和HTML DOM自動操作網頁 JavaScript HTML DOM 元素操作（節點）獲取HTML DOM節點元素的方法的總結