Vue中的插值操作及其他指令

最新推荐文章于 2024-02-01 17:54:39 发布

DangR-Jisoo

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量118

点赞数

分类专栏： Vue 前端 JavaScript

本文链接：https://blog.csdn.net/angela_connie/article/details/114239537

版权

前端同时被 3 个专栏收录

45 篇文章 2 订阅

订阅专栏

JavaScript

32 篇文章 0 订阅

订阅专栏

Vue

18 篇文章 2 订阅

订阅专栏

Vue中的插值操作及其他指令

插值操作

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接
        <h4>{{lastName+' '+firstName}}</h4>
        <h5>{{lastName}} {{firstName}}</h5>
        <h6>{{num*2}}</h6>//也可以做数学上的计算
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                firstName: 'jisoo',
                lastName: 'Kim',
                num: 100
            }
        })
    </script>
</body>

v-once指令(该指令后面不需要跟任何表达式,表示元素和组件只渲染一次，不会随数据的改变而改变)

<body>
    <div id="app">
        <h2 v-once>{{message}}</h2>//控制台也改变不了
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            }
        })
    </script>
</body>

v-html(以HTML的方式解析字符串,如果字符串里面含有HTML标签需要解析，可以使用此方法)

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

结果如图
4. v-text(接受一个字符串类型,与{{}}方法大致一样，但是不够灵活，使用场景较少)

<body>
    <div id="app">
        <h2 v-text='text'></h2>//与<h2>{{message}}</h2>结果相同
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                text: 'haha',
                message: 'haha'
            }
        })
    </script>
</body>

DangR-Jisoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的插值操作及其他指令

Vue中的插值操作及其他指令插值操作<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接 <h4>{{lastName+' '+firstName}}</h4> <h5>{{lastName}} {{fir
复制链接

扫一扫

专栏目录