Vue-----模板插值-----(v-once、v-html、v-bind使用)

lixianhui / 2023-09-04 / 原文

1、v-once

　　当组件在进行变量插值时只会插值一次。某些情况下，某些组件的渲染是由变量控制的，但是我们想让它一旦渲染后就不能够再被修改，可以是由v-once来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <!-- 未渲染 -->
        <!-- <h1>这里是模板的内容:{{count}}次点击</h1> -->
        <!-- 渲染之后 -->
        <h1 v-once>这里是模板的内容:{{count}}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const App={
            data() {
                return {
                    count:0
                }
            },
            methods:{
                clickButton(){
                    this.count=this.count+1
                }
         
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>

v-once

2、v-html

　　可以指定一个Vue变量数据，其会通过HTML解析的方式将原始HTML替换到其指定的标签位置

注：插入文本为一段HTML代码，直接使用使用双括号就不太好使了，会将其中的变量解析成纯文本。可以通过HTML解析的方式将原始HTML替换到其指定的标签位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
          <!-- 未渲染 -->
        <!-- <h1 v-once>这里是模板的内容:{{countHTML}}次点击</h1> -->
          <!-- 渲染之后 -->
        <h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const App={
            data() {
                return {
                    countHTML:"<span style='color:red'>0</span>"
                }
            },
            methods:{
                clickButton(){
                    this.count=this.count+1
                }
         
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>

v-html

3、v-bind

　　可以动态的改变标签style的属性，从而实现元素渲染样式的修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        #h1{
            color:red
        }
    </style>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <!-- 未渲染 -->
        <!-- <h1>这里是模板的内容:{{count}}次点击</h1> -->
        <!-- 渲染之后 -->
        <h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>
        
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const App={
            data() {
                return {
                    count:0,
                    id1:"h1"
                }
            },
            methods:{
                clickButton(){
                    this.count=this.count+1
                }
         
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>