Vue v-bind,vue中v-bind的绑定原理
本文介绍了v-bind指令在Vue.js中的用法，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
一、什么是v-bind指令
v-bind指令用于将一个或多个属性动态绑定到表达式，以响应HTML属性的更新。V-bind适用于动态属性。
二、语法
v-bind语法如下：
V-bind:动态属性名称= variable
也可以缩写成以下形式：
:动态属性名称= variable
代码示例如下：
img:src= imgUrl :title= title /
在这里，src和title是img标签的属性，在这里，它们被绑定到变量。
v-bind中也可以使用判断，例如：
img :src=flag？imgUrl:imgUrl2 /
这里是指如果flag变量的值为true，src属性的值就是变量imgurll的值，否则src属性的值就是变量imgurll 2的对应值。
注意：只要是HTML标签的属性，都可以这样绑定属性值。
三、在class属性中使用v-bind指令
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
在titleclass属性中对v-bind指令/标题进行分类。
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//构建一个vue实例
新Vue({
El:#my ，//el表示元素，表示已挂载的元素，不能挂载在HTML和body元素上。
//数据就是数据，可以是各种数据格式。
数据：{
flag:真的，
Var: BindStyle ，//value是样式的名称
样式1:“颜色样式”，
样式2:“颜色样式2”
},
//方法
方法：{
}
})
}
/脚本
风格。颜色样式{
颜色：# ff6600
}
. colorStyle2{
页边距-顶部：10px
背景色：黄绿色；
边框：1px纯蓝；
}。bindStyle {
边距-顶部：5px
颜色：红色；
}
. bindStyle2 {
边距-顶部：5px
颜色：红色；
背景色：绿色；
}
/风格
/头
身体
div id=我的
！-单样式引用，这里是直接写的数据中的变量名-
Div :class=varStyle 这里是使用v-bind来改变样式/div
！-单样式引用，双引号和单引号，样式的名字在单引号里面。这样，你可以不在数据中写变量-
Div :class=bindStyle2 直接引用样式名，不需要在数据中定义变量/div。
！-多种样式是指数组的使用方式-
Div :class=[style1，style2]这里同时使用了多个style/div。
！-条件判断格式：样式名：判断条件注意：样式名不能是变量-
div:class= { color style 2 :flag } 条件判断/div
！-如果三元运算符标志为真，将显示style2变量对应的样式；否则，将显示对应于style1变量的样式-
div :class=flag？2: style1 三元运算符/div
/div
/body
/html
效果图如下：
四、在style属性中使用v-bind指令
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
样式示例/标题
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//构建一个vue实例
新Vue({
El:#my ，//el表示元素，表示已挂载的元素，不能挂载在HTML和body元素上。
//数据就是数据，可以是各种数据格式。
数据：{
标志：真，//布尔
样式1:{背景：蓝色 }，
style2:{color:red}，
统一：“统一样式”
},
//方法
方法：{
}
})
}
/脚本
风格。统一样式{
页边距-顶部：10px
}
/风格
/头
身体
div id=我的
！-直接写内联风格：应采用驼峰式写作，中间-去掉-
div :style={color:#f60 ，fontSize:20px ，marginTop:10px}
内嵌样式
/div
！-一个参考-
div:style= style 1 :class= unify
单一参考
/div
！-多个样式引用-
Div: style= [style1，style2]: class= unify 多个样式引用/div
！-三元运算符-
div :style=flag？“style 1:style 2”:class=“unify”使用三元运算符来判断/div
/div
/body
/html
效果图如下：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。