- 内容渲染指令 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>
- 双向绑定指令
-
v-model
双向数据绑定指令,视图数据和数据源同步, -
一般情况下v-model指令用在表单元素中:
-
文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件
-
<input type="checkbox">和<input type="radio">会绑定checked属性并侦听change事件
-
<select>会绑定value属性并侦听change事件
-
-
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>
-
vue 内容渲染和属性绑定
ljh5746491192024-03-05 21:49
相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南aha-凯心2 小时前
vben 之 axios 封装漫谈网络2 小时前
WebSocket 在前后端的完整使用流程遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权xjt_09013 小时前
浅析Web存储系统