vue3框架_模板语法

vue3框架_模板语法

一.使用介绍

1. 文本

   数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本 插值，一般配合 js 中的 data() 设置数据。

2. 原始 HTML

   双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真 正的 HTML，你需要使用 v-html 指令。

3. 属性 Attribute

   Mustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令。

   v-bind可以简化写成:

4. 使用 JavaScript 表达式

   在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持，这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解 析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的 例子都不会生效。

二.实例

<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <div>
      <p>{{ rawHTML }}</p>
      <p><span v-html="rawHTML"></span></p>
    </div>
    <div :id="id"></div>
    <div>{{ num + 1 }}</div>
    <div>{{ flag ? 'hh':'xx' }}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World',
      rawHTML: '<a href=http://www.163.com>网易</a>',
      id: 1101,
      num: 1,
      flag:false
    }
  }
}
</script>