Vue.js中关于“{{}}”的用法

当我们在Vue.js中想要显示动态数据时，我们可以使用插值语法“{{}}”将数据绑定在模板中。该语法可以将Vue数据绑定到HTML中，动态更新DOM元素。

基本用法

通过一些简单的例子，我们可以看到“{{}}”的基本用法：

<div id="app">
  <p>{{ message }}</p>
</div>

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

在这个例子中，我们创建了一个Vue实例，并在data中定义了一个名为“message”的变量。在template中，我们使用“{{}}”将这个变量绑定到视图中。当数据发生改变时，模板会自动更新。

过滤器

在Vue.js中，“{{}}”也支持过滤器。过滤器可以将绑定的数据进行格式化，例如大小写转换、时间格式化等等。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, vue!'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      return value.toString().charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

在该例子中，我们创建了一个名为“capitalize”的过滤器。该过滤器会将绑定的数据转换为首字母大写格式。在模板中，我们通过“{{message | capitalize}}”将数据绑定到视图中，并使用过滤器对数据进行格式化。

结论

“{{}}”是Vue.js中的插值语法，可以将动态数据绑定到HTML中，实现动态更新。除了基本用法，它还支持过滤器，以便对绑定的数据进行格式化。