VUE-插值操作 mustache

最新推荐文章于 2022-04-21 13:33:18 发布

csdnhnma

最新推荐文章于 2022-04-21 13:33:18 发布

阅读量133

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/csdnhnma/article/details/116987258

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

重点：

mustache语法 {{变量或表达式}} 用的最多

v-once 只执行一次 <h2 v-once>{{message}}</h2>

v-html 当html内有标签时使用 <h2 v-html="url"></h2>

url:'<a href="http://www.baidu.com">百度</a>'

v-text 直接展示文本，不够灵活 <h2 v-text="message">Amanda</h2>

*v-for 遍历列表 <li v-for="item in movies">{{item}}</li>

v-pre 原封不动展示，比如{{}}特殊符号不想被解析 <h2 v-pre>{{message}}</h2>

v-cloak 遮挡中间值展示最终结果 <div id="app" v-cloak>

<head>中添加样式

<style>

[v-cloak]{

display: none;

}

</style>

vue代码举例：增加延迟

setTimeout (function(){

const app = new Vue({

el:'#app',

data:{

message:'你好',

}

})

},1000)

一、准备工作

安装VUE：https://blog.csdn.net/csdnhnma/article/details/116784455

二、目标 - 插值操作

1、如何把vue实例对象的data属性中的文本插入html里？

<body>

<div id="app">
    <h2>{{message}}</h2>  <!-- 变量形式 -->
    <!-- mustache语法中，不仅仅可直接写变量，也可写简单的表达式 -->
    <h2>{{firstName+lastName}}</h2>  <!-- 表达式形式 -->
    <h2>{{firstName+' '+lastName}}</h2>  <!-- 表达式形式 -->
    <h2>{{firstName}} {{lastName}}</h2>  <!-- 表达式形式 -->
    <h2>{{counter * 2}}</h2>  <!-- 表达式形式 -->
</div>
<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好',
            firstName:'Anna',
            lastName:'Li',
            counter:100
        }
    })

</script>

</body>