Vue框架---插值指令

最新推荐文章于 2025-12-21 15:11:39 发布

原创最新推荐文章于 2025-12-21 15:11:39 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

Vue 专栏收录该内容

4 篇文章

订阅专栏

1.搭建环境：idea

2.mustache语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{firstname +' '+lastname}}</h2>
    <h2>counter*2</h2>
</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello",
            firstname:"soul",
            lastname:"tony",
            counter:0
        }
    });
</script>

</body>
</html>

3.v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        [v-cloak]
        {
            display: none;
        }
    </style>
</head>
<body>
<!--vue解析器前有属性v-cloak
vue解析之后没有-->
<div id="app" v-cloak>
    {{message}}
</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello,vue"
        }
    });
</script>

</body>
</html>

4.v-html指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
   <h2 v-html="url"></h2>
</div>

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    });
</script>

</body>
</html>

5.v-once指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

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

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello,vue"
        }
    });
</script>

</body>
</html>

6.v-pre指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

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

<script>

    var vm=new Vue({
        el: "#app",
        data:{
            message:"hello,vue"
        }
    });
</script>

</body>
</html>