vue 内容渲染和属性绑定

  1. 内容渲染指令 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>
    1. {``{ }}插值表达式:在元素中的某一位置采用纯文本的方式渲染数据

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

    1. 使用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>
  2. 双向绑定指令
    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的修饰符

  3. 属性绑定指令
    1. 响应式地绑定一个元素属性,应该使用v-bind:指令

    2. 如果绑定的值是null或者undefined,那么该属性将会从渲染的元素上移除

    3. 因为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>
    4. 直接使用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>
相关推荐
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
fakaifa1 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
爱摄影的程序猿1 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
木木黄木木1 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言2 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家2 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya2 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me2 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__2 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭2 小时前
需求:对表格操作列中的操作进行局部刷新
前端