vue学习(五)基础入门-基础知识(3)

最新推荐文章于 2024-05-14 20:09:44 发布

wuyxinu

最新推荐文章于 2024-05-14 20:09:44 发布

阅读量240

点赞数

分类专栏： Vue Web前端

本文链接：https://blog.csdn.net/wuyxinu/article/details/102827105

版权

Web前端同时被 2 个专栏收录

47 篇文章 46 订阅

订阅专栏

Vue

40 篇文章 55 订阅

订阅专栏

Mustache语法（双大括号语法）

<body>
    <div id ="app"> 
        <h1>{{firstName}}</h1>
        <h2>{{lastName}}</h2>
        <!--mustache语法不仅可以直接写变量，也可以写简单地表达式-->
        <h2>{{firstName + lastName}}</h2>
        <h2>{{firstName + " " + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{counter*2}}</h2>
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            firstName: "abc",
            lastName: "wuyuxin",
            counter: 100,
        },
        methods: {}
     });
    </script>
</body>

v-once

只渲染一次，不会再被改变

v-html

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

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            url:'<a href="http://www.baidu.com">百度一下</a>'
        },
        methods: {}
     });
    </script>
</body>

v-text 在不想用mustache语法的时候，可以使用这样

但它不够灵活。建议使用mastache语法

v-pre 将代码原封不动的解析出来，不做任何处理

v-cloak 将未解析出来的代码块进行隐藏

但基本不会用到

wuyxinu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习(五)基础入门-基础知识(3)

Mustache语法（双大括号语法）<body> <div id ="app"> <h1>{{firstName}}</h1> <h2>{{lastName}}</h2>  ...
复制链接

扫一扫