vue2插值表达式

vue插值表达式

在Vue.js中，插值表达式是一种在HTML模板中嵌入动态值的基本方法。它利用双花括号 {{ }}来输出数据到页面上。这种方式允许你将数据绑定到文档对象模型（DOM），并且当数据更新时，视图会自动更新。

基本用法

插值最常见的用途是绑定文本内容到元素。例如，假设你有一个Vue实例的数据属性 message：

    new VUE({
        el: '#app',
        data:{
            message: 'Hello, Vue!'
        }
    })

可以在HTML模板中使用插值表达式来显示这条信息

    <div id='app'>
        {{ message }}
    </div>

这将会在页面上显示“Hello, Vue!”。如果修改 app.message的值，页面中的内容也会相应地更新

表达式能力

Vue的插值表达式不仅仅能输出数据，还能执行简单的JavaScript表达式：

    <div id="app">
  {{ message.split('').reverse().join('') }}
</div>

上面的代码会将 message字符串反转并显示。

    <div id="app">
    {{ age >= 18 ? '成年人':'未成年人'}}
</div>

上面的代码，如果 age数值大于等于18就显示成年人，如小于18就显示未成年人

使用过滤器

你还可以在插值表达式中使用过滤器来格式化数据，通过管道符 |添加过滤器：

    <div id="app">
  {{ message | capitalize }}
</div>

这里假设有一个名为 capitalize的过滤器，它将字符串的首字母转换成大写。

注意事项

插值表达式只能用于文本内容和属性绑定的值（通过指令 v-bind）。如果想操作元素本身的其它方面（如，绑定事件或使用表达式作为指令参数），应使用指令。

插值表达式在单行中被计算，不能写多行JavaScript代码