插值操作

最新推荐文章于 2023-04-06 16:50:43 发布

Eli-sun

最新推荐文章于 2023-04-06 16:50:43 发布

阅读量451

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106544407

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

插值操作

mustache语法：
mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式

<div id="app">
        <h3>{{firstName}},hello</h3>
        <h3>{{firstName+' '+lastName}}</h3>
        <h3>{{firstName}} {{lastName}}</h3>
        <h3>{{counter*2}}</h3>
    </div>
    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                firstName: 'sheldon',
                lastName: 'coper',
                counter: 100,

            }
        })
    </script>

v-once指令,后面不用跟任何对象，使用此指令后，在数据发送改变后页面不会改变

<div id="app">
        <h4>{{message}}</h4>
        <h4 v-once>{{message}}</h4>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！'
            }
        })
    </script>

在这里插入图片描述
v-html指令

 <div id="app">
        <h4>{{message}}</h4>
        <h4 v-once>{{message}}</h4>
        <h2>{{url}}</h2>
        <h2 v-html='url'></h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                url: '<a href="http://www.baidu.com">百度一下</a>',
            }
        })
    </script>

在这里插入图片描述
v-text指令
v-text作用和mustache比较相似，都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
一般不用，因为它不够灵活，它会覆盖掉后面添加进去的东西

<div id="app">
        <h4>{{message}}</h4>
        <h4 v-once>{{message}}</h4>
        <h2>{{url}}</h2>
        <h2 v-html='url'></h2>
        <h2>{{message}},hello</h2>
        <h2 v-text='message'>,hello</h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                url: '<a href="http://www.baidu.com">百度一下</a>',
            }
        })
    </script>

在这里插入图片描述 v-pre指令
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法

<div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                url: '<a href="http://www.baidu.com">百度一下</a>',
            }
        })
    </script>

在这里插入图片描述
v-cloak指令
在某些情况下，我们浏览器可能会直接显示出未编译的mustache标签。
cloak n. 披风斗篷
在Vue解析之前有v-cloak
在Vue解析之后没有v-cloak

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h4>{{message}}</h4>
        <h4 v-once>{{message}}</h4>
        <h2>{{url}}</h2>
        <h2 v-html='url'></h2>
        <h2>{{message}},hello</h2>
        <h2 v-text='message'>,hello</h2>
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>

    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        setTimeout(function() {
            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好！',
                    url: '<a href="http://www.baidu.com">百度一下</a>',
                }
            })
        }, 2000)
    </script>
</body>

</html>