我的感悟
你真的了解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......}
.active{
color: red;
}
{{message}}
//所引用的Vue文件
const app = new Vue({
el: '.app',
data: {
message: '你好Vue!',
isActive: true,
isLine: true
},
})
3.v-bind动态绑定class(数组语法)
语法:
v-bind: class = [ 数组名1, 数组名n......
{{message}}
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
active: 'a',
lineL: 'b'
},
})
4.v-bind动态绑定style(对象语法)
: style = { 属性名: 属性值, ....}
.active{
color: red;
}
{{message}}
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
finalSize: 100,
finalColor: 'red',
},
})
5.v-bind动态绑定style(数组语法)
: style = [ 数组名1, 数组名2 ....]
{{message}}
const app = new Vue({
el:'#app',
data: {
message: '你好Vue!',
finalSize: 100,
finalColor: 'red',
style1: {background: 'red'},
style2: {color: 'white'}
},
})
三、v-bind指令的一些注意事项
this is test
这是错误的,因为vue会把font-size当成一个data数据!不能在属性值内直接写入以下语法
this is test
可以看到只需要在总的样式前后各加上一个 ’ 单引号即可!这样他就会把他当作字符串了,不过 如果我们这么加样式就没有必要写v-bind了…
四、我在项目中的应用,结合vue(动态绑定属性)
v-model="form.startDatetime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间">
v-model="form.endDatetime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间">
data() {
return {
// 单号是否禁用
disabledData:true,
// 班组人员信息展示
通过true和false动态改变属性值的变化,适用于属性值为true和false
总结
总体来说v-bind这个指令就是这么个回事了!在实际中多多练习就可以啦
推荐阅读
发表评论