Vue mustache语法&常用指令

前端开发作者： 2024-08-20 09:45:01

mustache 内容渲染使用mustache语法{{变量}}进行渲染操作，它将会从Vue实例中查找这个变量。 <body> <div id="app">

mustache

<body>
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data: {
                msg: "HELLO,WORLD",}
        })
    </script>
</body>

<body>
    <div id="app">
        <p>{{ num1 + num2 }}</p>
        <p>{{ num1 * num2 }}</p>
        <p>{{ num1 - num2 }}</p>
        <p>{{ num1 / num2 }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data: {
                num1: 200,num2: 100,}
        })
    </script>
</body

Vue指令

<body>
    <div id="app">
        <p>{{ num1 + num2 }}</p>
        <p v-once>{{ num1 + num2 }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",}
        })
    </script>
</body>

<body>
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data: {
                msg:"<a href='http://www.google.com/'>谷歌</a>"
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data: {
                msg:"<a href='http://www.google.com/'>谷歌</a>"
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <p v-show="false">{{msg}}</p>
        <p v-show="true">{{msg}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data: {
                msg:"HELLO,WORLD"
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <p v-pre>{{msg}}</p>
        <p>{{msg}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",WORLD"
            }
        })
    </script>
</body>

<style>
    [v-cloak]{
        display: none;
    }
</style>

<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
    setTimeout(() => {
        const app = new Vue({
            el: "#app",WORLD"
            }
        })
    },3000)
</script>
</body>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65448.html

相关资讯： Vue mustache语法&常用指令