Vue教程之模版语法

v-text和v-html

• v-text : 文本数据，无法解析html。
• v-html : 可输出文本数据，也可解析html。

实例演示：

<template>
  <div>
    <div v-text="content"></div>
    <div v-html="content"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '<h1>hello world</h1>'
    }
  }
}
</script>

v-bind

插值表达式的语法是无法在html中的属性中使用的，因此遇到这种情况应该使用 v-bind 执行：

<template>
  <div>
    <div :id="idValue">
      hello world
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      idValue: 'lanyulei1'
    }
  },
}
</script>

对于属性的值是布尔类型 ，它只要存在就意味着值为 true，v-bind 工作起来略有不同，在这个例子中：

<template>
  <div>
    <div :id="idValue">
      hello world
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      idValue: true
    }
  }
}
</script>

如果 idValue 的值是 null、undefined 或 false，则 id 属性 不会被包含在渲染出来的 <button> 元素中。

JS表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

// 三元表达式
{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="idValue + '-1'"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}