Vue.js中双层懂的绑定方式_中双层花括号_如果需要绑定属性值你需要使用特殊的指令

Vue.js中双层花括号：简单易懂的绑定方式

一、双层花括号的简单用法

比如说，我们有一个变量叫做 greeting，我们想要在页面上展示它，就可以这样写：

 {{ greeting }}

在Vue的JavaScript部分，它会看起来像这样：

data() {
  return {
    greeting: 'Hello Vue!'
  }
}

二、数据变化，视图自动更新

例如，我们可以创建一个计数器，每次点击一个按钮，计数器的值就会增加，页面上的显示也会跟着更新：

data() {
  return {
    count: 0
  }
}

三、双层花括号里的表达式

比如，我们想将文本转换成大写，就可以这样做：

{{ message.toUpperCase() }}

但是，需要注意的是，这里的表达式必须是一行的，不能有复杂的逻辑，比如循环或者条件判断。

四、插值绑定的应用

显示用户输入：

{{ userInput }}

列表渲染：

{{ items.map(item => item.text) }}

五、插值绑定的限制

比如，如果你想要动态绑定一个class，你通常会这样写：

class="{'active': isActive}"