1.在此次教学之前我们先来学习怎么配置环境并且创建vue31.1按照以下步骤安装并配置环境【Node.js官网】https://nodejs.org直接不断下一步安装即可很简单【npm官网】https://www.npmjs.com【查看安装的版本】node -vnpm -v【查看当前镜像源】npm get registry【设置淘宝镜像源默认镜像源是国外网址国内访问经常失败所以要设置淘宝镜像源】npm config set registry https://registry.npmmirror.com/【其他】1.安装pnpm包管理工具 npm install -g pnpm2.安装网络请求库axios npm install axios1.2创建vue31.首先确保已经安装pnpm工具包 npm install -g pnpm (npm install -g xxxx 全局安装工具包可以直接在命令行使用否则无法使用)2.创建脚手架pnpm create vue3.配置脚手架相关插件按需配置4.执行以下指令cd vue-projectpnpm installpnpm formatpnpm dev在命令提示符中完成全部操作大概是如图所示2.标签属性动态绑定复制图上local到浏览器回车打开网页然后在打开visual studio code 点击左上角 文件 在下拉窗口选择打开文件夹 选中你项目。我直接用课堂上老师的代码展示template !-- -- !-- 第 1 步为什么需要 v-bind -- !-- 已学的 {{ }} 只能写在标签之间 -- !-- 不能写在属性里属性想使用 JS 数据必须用 v-bind -- !-- -- !-- 【错误示范】href 会变成字面量 {{ url }}无法跳转 -- !-- a href{{ url }}错误写法/a -- !-- 【正确写法】v-bind:属性名JS表达式属性值不再是写死的字符串 -- !-- 本来HTML的标签属性他的值是写死的 通过v-bind修饰后该标签属性可以被Vue实例动态更新 -- a v-bind:hrefurl 去 Vue 官网v-bind 完整写法 /a br !-- -- !-- 第 2 步简写形式 -- !-- v-bind: 可以简写成一个冒号 :实际开发 99% 都用简写 -- !-- 冒号后面跟属性名引号里写 JS 表达式 -- !-- -- img :srcimgUrl width100 hr !-- -- !-- 第 3 步动态绑定 class对象语法最常用 -- !-- :class{ 类名: 布尔表达式 } 值为 true 时该类生效 -- !-- 结合已学的 v-on数据一变样式自动变 —— 数据驱动视图 -- !-- -- !-- 类名hot有时候被激活有时候失效 -- p v-bind:class{ hot: temp 30 } 气温{{ temp }}℃ /p !-- 当该类生效时类选择器激活文字变红加粗 -- button clicktemp temp 5 5℃ /button button clicktemp temp - 5 -5℃ /button hr !-- -- !-- 第 4 步绑定布尔属性 disabled -- !-- :disabledfalse 时按钮可用为 true 时按钮被禁用 -- !-- 注意引号里是 JS 表达式可以做运算判断 -- !-- -- p高温预警时才能点击「一键降温」/p button :disabledtemp 30 clicktemp 25 一键降温至25℃ /button /template script setup // 组合式 APIref 创建响应式数据已学知识点 import { ref } from vue const url ref(https://cn.vuejs.org/) // 第1步绑给 a 标签的 href const imgUrl ref(https://cn.vuejs.org/logo.svg) // 第2步绑给 img 的 src const temp ref(25) // 第3、4步气温数据 /script style scoped /* 唯一的 CSS气温达到 30℃ 时文字变红加粗 */ .hot { color: red; font-weight: bold; } /style !-- -- !-- 课堂总结v-bind 到底是干嘛的 -- !-- -- !-- 一句话{{ }} 管标签内容v-bind 管标签属性 —— 把 JS 数据绑到属性上让属性活起来 (让只能写死的标签属性变得可动态更新) 【核心对比】 不用 v-bind属性值是写死的字符串 hrefhttps://vuejs.org 用了 v-bind属性值是 JS 表达式 :hrefurl 【三个要点】 1. 用途属性想用变量/表达式必须加 v-bind或简写冒号 2. 本质引号里从字符串变成JS 表达式数据一变视图自动更新 3. 简写v-bind:src 等价于 :src开发中只用冒号写法 --以下是运行结果最后总结一下分工对比{{ }}作用在标签内容中间展示文本v-bind作用在标签属性动态给属性赋值不加v-bind属性值是固定字符串加v-bind引号内变成JS 表达式支持变量、判断运算简写v-bind:xxx→:xxx开发一律用冒号简写常用场景绑定href、src、动态 class、disabled、style等属性核心v-bind 让原本写死的 HTML 属性变成跟随 JS 数据动态变化的属性这就是 Vue 声明式渲染的魅力。 
长河君 · 2026/10/14 2:52:41 · 阅读 1.2k 标签属性动态绑定——新手小白篇
1.在此次教学之前我们先来学习怎么配置环境并且创建vue31.1按照以下步骤安装并配置环境【Node.js官网】https://nodejs.org直接不断下一步安装即可很简单【npm官网】https://www.npmjs.com【查看安装的版本】node -vnpm -v【查看当前镜像源】npm get registry【设置淘宝镜像源默认镜像源是国外网址国内访问经常失败所以要设置淘宝镜像源】npm config set registry https://registry.npmmirror.com/【其他】1.安装pnpm包管理工具 npm install -g pnpm2.安装网络请求库axios npm install axios1.2创建vue31.首先确保已经安装pnpm工具包 npm install -g pnpm (npm install -g xxxx 全局安装工具包可以直接在命令行使用否则无法使用)2.创建脚手架pnpm create vue3.配置脚手架相关插件按需配置4.执行以下指令cd vue-projectpnpm installpnpm formatpnpm dev在命令提示符中完成全部操作大概是如图所示2.标签属性动态绑定复制图上local到浏览器回车打开网页然后在打开visual studio code 点击左上角 文件 在下拉窗口选择打开文件夹 选中你项目。我直接用课堂上老师的代码展示template !-- -- !-- 第 1 步为什么需要 v-bind -- !-- 已学的 {{ }} 只能写在标签之间 -- !-- 不能写在属性里属性想使用 JS 数据必须用 v-bind -- !-- -- !-- 【错误示范】href 会变成字面量 {{ url }}无法跳转 -- !-- a href{{ url }}错误写法/a -- !-- 【正确写法】v-bind:属性名JS表达式属性值不再是写死的字符串 -- !-- 本来HTML的标签属性他的值是写死的 通过v-bind修饰后该标签属性可以被Vue实例动态更新 -- a v-bind:hrefurl 去 Vue 官网v-bind 完整写法 /a br !-- -- !-- 第 2 步简写形式 -- !-- v-bind: 可以简写成一个冒号 :实际开发 99% 都用简写 -- !-- 冒号后面跟属性名引号里写 JS 表达式 -- !-- -- img :srcimgUrl width100 hr !-- -- !-- 第 3 步动态绑定 class对象语法最常用 -- !-- :class{ 类名: 布尔表达式 } 值为 true 时该类生效 -- !-- 结合已学的 v-on数据一变样式自动变 —— 数据驱动视图 -- !-- -- !-- 类名hot有时候被激活有时候失效 -- p v-bind:class{ hot: temp 30 } 气温{{ temp }}℃ /p !-- 当该类生效时类选择器激活文字变红加粗 -- button clicktemp temp 5 5℃ /button button clicktemp temp - 5 -5℃ /button hr !-- -- !-- 第 4 步绑定布尔属性 disabled -- !-- :disabledfalse 时按钮可用为 true 时按钮被禁用 -- !-- 注意引号里是 JS 表达式可以做运算判断 -- !-- -- p高温预警时才能点击「一键降温」/p button :disabledtemp 30 clicktemp 25 一键降温至25℃ /button /template script setup // 组合式 APIref 创建响应式数据已学知识点 import { ref } from vue const url ref(https://cn.vuejs.org/) // 第1步绑给 a 标签的 href const imgUrl ref(https://cn.vuejs.org/logo.svg) // 第2步绑给 img 的 src const temp ref(25) // 第3、4步气温数据 /script style scoped /* 唯一的 CSS气温达到 30℃ 时文字变红加粗 */ .hot { color: red; font-weight: bold; } /style !-- -- !-- 课堂总结v-bind 到底是干嘛的 -- !-- -- !-- 一句话{{ }} 管标签内容v-bind 管标签属性 —— 把 JS 数据绑到属性上让属性活起来 (让只能写死的标签属性变得可动态更新) 【核心对比】 不用 v-bind属性值是写死的字符串 hrefhttps://vuejs.org 用了 v-bind属性值是 JS 表达式 :hrefurl 【三个要点】 1. 用途属性想用变量/表达式必须加 v-bind或简写冒号 2. 本质引号里从字符串变成JS 表达式数据一变视图自动更新 3. 简写v-bind:src 等价于 :src开发中只用冒号写法 --以下是运行结果最后总结一下分工对比{{ }}作用在标签内容中间展示文本v-bind作用在标签属性动态给属性赋值不加v-bind属性值是固定字符串加v-bind引号内变成JS 表达式支持变量、判断运算简写v-bind:xxx→:xxx开发一律用冒号简写常用场景绑定href、src、动态 class、disabled、style等属性核心v-bind 让原本写死的 HTML 属性变成跟随 JS 数据动态变化的属性这就是 Vue 声明式渲染的魅力。