1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之模版语法

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>

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

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

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

如果 idValue 的值是 nullundefined 或 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 } }}

这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。