二、vue插值操作

原创已于 2022-03-25 15:51:55 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-22 11:15:26 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js中的几种插值和指令，包括Mustache语法、v-once（仅渲染一次）、v-html（插入HTML代码）、v-text（文本插入）、v-pre（跳过解析）和v-cloak（避免显示未渲染的Mustache语法）。通过实例展示了这些指令的效果和应用场景，有助于理解Vue.js中的数据绑定和视图更新机制。

一、Mustache

mustache语法就是两个大括号"{{}}" ,mastache语法不仅直接可以写值，也可以写一些简单的表达式。

<body>
<div id="app" >
    <h1>{{counter * 2}}</h1>
    <h1>{{message}} kebe</h1>
    <h1>{{message + ' ' + firstName + ' ' + lastName}}</h1>
    <h1>{{message}}{{firstName}}{{lastName}}</h1>
    <h1>{{message}} {{firstName}} {{lastName}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            counter: 100,
            message: '你好！',
            firstName: 'kebe',
            lastName: 'bryant'
        }
    })

</script>
</body>

二、v-once

作用为定义它的元素或者组件只会渲染一次，在修改变量中的值时，页面的值并不发生改变。

<div id="app" >
    <h1>未加v-once指令:{{message}}</h1>
    <h1 v-once >加v-once指令:{{message}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: '你好！'
        }
    })

</script>

效果图：
在这里插入图片描述

三、v-html

v-html指令会将后端返回的数据以html代码的方式插入，而不是文本方式插入。

<div id="app" >
    <h1>{{url}}</h1>
    <h1 v-html="url" ></h1>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

效果图：
在这里插入图片描述

四、v-text

将输入以文本的方式插入标签中，与mustache相似，但是该指令不常使用，原因在于v-text无法进行字符串拼接。

<div id="app" >
    <h1>{{message}},kebe</h1>
    <h1 v-text="message">kebe</h1>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: '你好！'
        }
    })
</script>

效果图：
在这里插入图片描述

五、v-pre

该指令会告诉vue将标签中的表达式/文本不要解析，原封不动的展示出来，例如写mustache语法时，vue会将变量的值解析出来插入标签中，那如果我要将mustache语法以文档的方式显示在页面呢？答案就是用v-pre。

<body>
<div id="app" >
    <h1>{{message}}</h1>
    <h1 v-pre >{{message}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: '你好！'
        }
    })
</script>
</body>

效果图：
在这里插入图片描述

六、v-cloak

在浏览器渲染html时，如果vue请求后端网络延时，数据无法及时返回并赋值于变量，那么浏览器无法显示变量的值，就会将mustache语法当作文本显示在页面中。v-cloak指令在vue进行解析时，会把它去掉，也就是说我们可以先使用v-cloak属性将标签隐藏起来，在vue解析时，自动去掉v-cloak，标签就会显示出来，这时标签中包含的变量是有值的。因此不会出现因网络延迟造成直接显示表达式的问题，从而提高用户体验。然而，这个指令后续也不常用，因为在实际开发中，vue页面的模板会被渲染成函数，真正使用的其实是虚拟DOM，因此不会存在这种情况。

<body>
    <style>
        /* 将有带有v-cloak属性的标签隐藏起来  */
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" >
        <h1>{{message}}</h1>
        <h1 v-cloak >{{message}}</h1>
    </div>
<script src="./js/vue.js"></script>
<script>
    //延时1秒，模拟网络超时，数据无法及时插入
    setTimeout(function(){
        //vue解析时去掉v-cloak属性，标签显示
        const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: '你好！'
        }
        })
    },1000)
</script>
</body>