Vue的八个基础命令及作用

1.v-text

作用:获取data数据, 设置标签的内容,以纯文本进行显示v-text 会覆盖 标签中的内容,如果想要拼接数据,可以直接在v-text中拼接如果拼接的是数字:直接使用 "+"如果拼接的是字符串,需要使用与外部不同的引号进行包裹内容

2.v-html

作用:可以当做 v-text 一样使用,显示普通文本,设置元素的 innerHTML (可以向元素中写入新的标签)

3.v-on

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法

4.v-show

作用: v-show 需要一个 boolean 类型的值,根据值的变化,进行标签的显示和隐藏

5.v-if

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

原理:会操作 DOM 元素,将元素删除或添加,而不是像 v-show 一样修改样式,使用场景:频繁切换使用 v-show,反之使用 v-if

6.v-bind

作用: 设置元素的属性 (比如:src,title,class,style传递json串

一次只能修改一个属性 v-bind:属性名="属性值": 属性名

7.v-for

作用: 根据数据生成列表结构,常与数组一起使用,进行遍历操作

v-for="item,index in arr1"

v-for="person in persons"

push():将元素追加进入数组

shift():将数组的起始元素删除

数组的长度变化,会同步更新到页面上,是响应式的

8 v-on

**作用:**可以向函数传递参数,事件修饰符,可以制定哪些方式触发事件,比如说按键,回车等

相关推荐
云浪10 小时前
Go 并发实战:从零实现一个高并发安全的任务调度器
javascript·后端·go
OpsEye18 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿18 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
流烟默20 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku20 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding20 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
执子念的飞鱼21 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
不简说21 小时前
AI 帮你画模板、点一下就云打印:sv-print 这三个月都干了啥
前端·javascript·人工智能
大明二代21 小时前
从零构建 Mastra RAG MVP:DeepSeek、SiliconFlow 与 PostgreSQL/pgvector 实战
javascript·数据库·人工智能
结局无敌1 天前
React Native for OpenHarmony 实战:三方库 react-native-paper 的鸿蒙化适配指南
javascript·人工智能·深度学习·react native·react.js·ecmascript·harmonyos