vue_插值操作

最新推荐文章于 2021-09-08 14:39:45 发布

MrX_YOUNG

最新推荐文章于 2021-09-08 14:39:45 发布

阅读量171

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/MrX_YOUNG/article/details/107304274

版权

vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Mustache语法（双大括号语法）
用于将data中的文本数据插入到HTML中，可以写变量，也可以写简单的表达式，并且是响应式的。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{message}},message</h2>
        <h2>{{message}}，{{firstName}</h2>
        <h2>{{message+' '+firstName+' '+lastName}}</h2>
        <h2>{{counter}}</h2>
        <h2>{{counter*2}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                firstName: 'kobe',
                lastName: 'bryant',
                counter: 100
            }
        })
    </script>
</body>

2.v-once
v-once后不跟任何表达式，当不想让数据是响应式的时候使用，表示元素只渲染一次，不会随着数据的改变而改变

<body>
    <div id="app">
        <!--非响应式，只显示最初，不会跟着数据改变而改变  -->
        <h2 v-once>{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            }
        })
    </script>
</body>

3.v-html
将内容作为html来解析出来并渲染

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

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                url: '<a href="http://www.baidu.com">百度</a>'
            }
        })
    </script>
</body>

4.v-text
用于将文本数据显示在界面中，会覆盖标签内文本

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="message">这段文字将被覆盖</h2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello'
            },
            methods: {}
        });
    </script>
</body>

5.v-pre
用于跳过这个元素和它子元素的编译过程，原封不动地展示标签内的内容

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '这段文字被解析出来了'
            },
            methods: {}
        });
    </script>
</body>

6.v-clock
延迟响应

<body>
    <div id="app" v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script>
        setTimeout(function() {
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'hello'
                },
                methods: {}
            });
        }, 1000)
    </script>
</body>