我的感悟
你真的了解v-bind吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，可以我这篇文章，你会熟悉更多关于v-bind的使用。如有错误，欢迎大家批评指正
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
-
目录
我的感悟
文章目录
我的感悟
一、v-bind是什么？
二、详细用法总结
1.v-bind介绍
2..v-bind动态绑定class(对象方法)
3.v-bind动态绑定class(数组语法)
4.v-bind动态绑定style(对象语法)
5.v-bind动态绑定style(数组语法)
三、v-bind指令的一些注意事项
四、我在项目中的应用，结合vue（动态绑定属性）
总结
我的感悟
你真的了解v-bind吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-bind是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，可以我这篇文章，你会熟悉更多关于v-bind的使用。如有错误，欢迎大家批评指正
提示：以下是本篇文章正文内容，下面案例可供参考
一、v-bind是什么？
简单来说：v-bind就是用于绑定数据和元素属性的
二、详细用法总结
1.v-bind介绍
作用: 动态绑定属性
语法: v-bind: 属性名 = "数据名"
缩写(也叫语法糖): : 属性名 = "数据名"
2..v-bind动态绑定class(对象方法)
语法如下（示例）：
v-bind: class = { 类名1: 布尔值, 类名n......}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div class="app">
<h1 :class="{active: isActive, line: isLine}">{{message}}</h1>
</div>
//所引用的Vue文件
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
message: '你好Vue!',
isActive: true,
isLine: true
},
})
</script>
</body>
</html>3.v-bind动态绑定class(数组语法)
语法:
v-bind: class = [ 数组名1, 数组名n......
<div id="app">
<h1 :class="[active, lineL]">{{message}}</h1>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
active: 'a',
lineL: 'b'
},
})
</script>4.v-bind动态绑定style(对象语法)
: style = { 属性名: 属性值, ....}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1 :style="{fontSize: finalSize + 'px', background: finalColor}">{{message}}</h1>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
finalSize: 100,
finalColor: 'red',
},
})
</script>
</body>
</html>5.v-bind动态绑定style(数组语法)
: style = [ 数组名1, 数组名2 ....]
<div id="app">
<h1 :style="[style1, style2]">{{message}}</h1>
<!-- <h1 :style="getStyles()">{{message}}</h1> -->
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
finalSize: 100,
finalColor: 'red',
style1: {background: 'red'},
style2: {color: 'white'}
},
})
</script>三、v-bind指令的一些注意事项
<h1 :style="font-size:50px;color:red;">this is test</h1>
这是错误的，因为vue会把font-size当成一个data数据！不能在属性值内直接写入以下语法
<h1 :style="'font-size:50px;color:red;'">this is test</h1>
可以看到只需要在总的样式前后各加上一个 ’ 单引号即可！这样他就会把他当作字符串了，不过 如果我们这么加样式就没有必要写v-bind了…
四、我在项目中的应用，结合vue（动态绑定属性）
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="单号" prop="gdglId">
<el-input v-model="form.gdglId" placeholder="请输入单号" v-bind:disabled="disabledData" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="委托部门" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入委托部门" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="接单人" prop="projectReceivedBy">
<el-input v-model="form.projectReceivedBy" placeholder="请输入接单人" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="开始时间" prop="startDatetime">
<el-date-picker clearable
v-model="form.startDatetime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="结束时间" prop="endDatetime">
<el-date-picker clearable
v-model="form.endDatetime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>
</div> data() {
return {
// 单号是否禁用
disabledData:true,
// 班组人员信息展示通过true和false动态改变属性值的变化，适用于属性值为true和false文章来源：https://www.toymoban.com/news/detail-815171.html
总结
总体来说v-bind这个指令就是这么个回事了！在实际中多多练习就可以啦文章来源地址https://www.toymoban.com/news/detail-815171.html
到了这里，关于v-bind详解与常见用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
