Vue插值语法

最新推荐文章于 2024-05-14 07:07:21 发布

2021_fc

最新推荐文章于 2024-05-14 07:07:21 发布

阅读量225

点赞数 1

分类专栏： Vue 文章标签： html vue.js

本文链接：https://blog.csdn.net/weixin_45310564/article/details/120072030

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

插值

mustache语法：`{{}}`

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

<div id="app">
    <div>{{message}}</div>
    <div>{{one + two}}</div>
    <div>{{one + ' ' + two}}</div>
    <div>{{one}} {{two}}</div>
    <div>{{count * 2}}</div>
</div>
<script>
    //声明式编程
    const app = new Vue({
        el:'#app',
        data:{
            message:'没试过你怎么知道不行',
            one :'前',
            two:'后',
            count:'20'
        }
    })
</script>

其他指令

v-once：第一次被赋值之后无法再被修改，类似于java的final

<div id="app">
    <div v-once>{{message}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'没试过你怎么知道不行'
        }
    })
</script>

v-html：让结果直接以html的结构显示

<div id="app">
    <div>{{url}}</div>
    <div v-html="url"></div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

运行结果

在这里插入图片描述

v-text：很少用到，和直接使用{{}}差不多,但是它会覆盖内容

<div id="app">
    <div v-text="message"></div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            message:'没试过你怎么知道不行'
        }
    })
</script>

在这里插入图片描述

v-pre：可以将内容原封不动的展示出来

<div id="app">
    <div>{{message}}</div>
    <div v-pre>{{message}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app', 
        data:{
            message:'没试过你怎么知道不行'
        }
    })
</script>

在这里插入图片描述

v-cloak：在某些情况下，我们浏览器可能会直接显示出为编译的Mustache标签,此标签用于在还未加载到vue的时候隐藏Mustache标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>{{message}}</div>        
    </div>
    <script>
        setTimeout(function(){
            const app = new Vue({
                el:'#app', 
                data:{
                    message:'没试过你怎么知道不行'
                }
            })
        },1000)
    </script>
</body>
</html>

2021_fc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插值语法

插值mustache语法：{{}}mustache语法中，不仅可以直接写变量，也可以写简单的表达式。<div id="app"> <div>{{message}}</div> <div>{{one + two}}</div> <div>{{one + ' ' + two}}</div> <div>{{one}} {{two}}</div> <d
复制链接

扫一扫