vue 内容渲染和属性绑定

内容渲染指令 1. 使用v-text指令，将数据采用纯文本方式填充其空元素中

javascript 复制代码

<script setup>
    import { reactive } from 'vue'
    let student = reactive({
        name: 'Jack',
        desc: '<h3>我是来自中国的小朋友！</h3>'
    })
</script>
<template>
  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
  <div v-text="student.name"></div>
  <!-- v-text：以纯文本的方式显示数据 -->
  <div v-text="student.desc"></div>
  <!-- 下面的代码会报错：div 元素不是空元素 -->
  <!-- <div v-text="student.name">这是原始的div数据</div> -->
</template>

{``{ }}插值表达式:在元素中的某一位置采用纯文本的方式渲染数据

<div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>

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

javascript 复制代码

<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
})


</script>

<template>

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

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 语法显示数据 -->
    <div v-html="student.desc"></div>

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

</template>

双向绑定指令
1. v-model双向数据绑定指令，视图数据和数据源同步,
2. 一般情况下v-model指令用在表单元素中：
  1. 文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件
  2. <input type="checkbox">和<input type="radio">会绑定checked属性并侦听change事件
  3. <select>会绑定value属性并侦听change事件
3. v-model的修饰符

属性绑定指令

响应式地绑定一个元素属性，应该使用v-bind:指令
如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除

因为v-bind非常常用，我们提供了特定的简写语法:
1.

javascript 复制代码

<script setup>
import { reactive } from 'vue'
let picture = reactive({
    src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 图像地址
    width: 200 // 显示宽度
})
</script>
<template>
    <input type="range" min="100" max="500" v-model="picture.width">
    <hr>
    <!-- v-bind: 为 src 属性绑定指定的数据源 -->
    <img v-bind:src="picture.src" v-bind:width="picture.width">
    <hr>
    <!-- : 是 v-bind: 的缩写形式 -->
    <img :src="picture.src" :width="picture.width">
    <hr>
    <!-- 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除 -->
    <button @click="picture.width = null">设置宽度为NULL</button>
</template>

直接使用v-bind来为元素绑定多个属性及其值
1.

javascript 复制代码

<script setup>
import {reactive} from 'vue'
let attrs = reactive({
    class: 'error',
    id: 'borderBlue'
})
</script>
<template>
    <!-- 直接使用 v-bind 来为元素绑定多个属性及其值 -->
    <button v-bind="attrs">我是一个普通的按钮</button>
</template>
<style>
    .error {
        background-color: rgb(167, 58, 58);
        color: white;
    }

    #borderBlue {
        border: 2px solid rgb(44, 67, 167);
    }
</style>