前端基础-Vue.js模板语法(插值)

cwl_java

发布于 2020-03-26 16:23:29

1.9K0

发布于 2020-03-26 16:23:29

文章被收录于专栏：cwl_Java

第 2 章模板语法-插值

我们在前面的代码中，使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值；

这种使用 {{}} 获取值得方式，叫做插值或 插值表达式 ；

2.1 文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示

<body>
    <div id="div">
       文本插值 {{html_str}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            html_str:'<h2>Vue<h2>'
        }
    })
</script>

浏览器渲染结果：<div id="div">文本插值 <h2>Vue<h2></div>

打开浏览器的 REPL 环境输入 app.html_str = '<s>vue</s>'

浏览器渲染结果就会立刻发生改变： <div id="div">文本插值 <s>vue</s></div>

2.2 使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；

(表达式是运算，有结果；语句就是代码，可以没有结果)

<body>
    <div id="div" >
       {{ un > 3 ? '大' : '小'}}
       {{ fun() }}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            un:2,
            fun:()=> {return 1+2}
        }
    })
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法