Vue学习：05-内容渲染

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。

一、v-text

使用v-text指令，将数据采用纯文本方式填充其空元素中。

App.vue

<script setup>

  //引入ref函数，来声明响应式对象
  import { ref } from 'vue';
  
  //ref对对象数据源有效，具备响应式
  let student = ref({
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
  })  

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
  <div v-text="student.name"></div>
  <div v-text="student.desc"></div>

  <!-- 下面的代码会报错，因为div元素不是空元素 -->
  <!-- <div v-text="student.name">这是原始数据</div> -->
</template>

二、{{ }}插值表达式

在元素中的某一位置采用纯文本的方式渲染数据， 语法：{{xxx}} ，xxxx 会作为 js 表达式解析 App.vue

<script setup>

  //引入ref函数，来声明响应式对象
  import { ref } from 'vue';
  
  //ref对对象数据源有效，具备响应式
  let student = ref({
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
  })  

</script>

<!-- 视图区域（view） -->
<template>
  <div>学生姓名：{{ student.name }}，学生描述：{{ student.desc }}</div>
</template>

三、v-html

使用v-html指令，将数据采用HTML语法填充其空元素中

App.vue

<script setup>

  //引入ref函数，来声明响应式对象
  import { ref } from 'vue';
  
  //ref对对象数据源有效，具备响应式
  let student = ref({
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
  })  

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
  <div v-html="student.name"></div>
  <div v-html="student.desc"></div>

  <!-- 下面的代码会报错，因为div元素不是空元素 -->
  <!-- <div v-html="student.name">这是原始数据</div> -->
</template>