vue基础属性之v-bind
v-bind就是用于绑定数据和元素属性的
v-bind后面是：属性名=，v-bind也要有一个简写的方式 就是：（冒号），可以理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url"> ... </a>
如果你的 Vue 实例有一个 data property [key]，其值为 "href"，那么这个绑定将等价于 v-bind:href。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.red {
color: red;
}
img {
width: 100px;
height: 100px;
}
</style>
<body>
<div id="app">
<a v-bind:href="url">{{text}}</a>
<img v-bind:src="img">
<!-- v-bind也要有一个简写的方式 就是：冒号 -->
<p :class="bool?'red':''">我是红色</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com",
text: "百度一下",
img: "https://cn.vuejs.org/images/logo.png",
bool: true
},
})
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话