我们在单文件组件中:
xixi.png
这种时候我们就要用到动态绑定v-bind这一指令
v-bind
使用方法:v-bind: 省略写法: : 在以下举例中写法多样
- 作用：可以给html元素或者组件动态地绑定一个或多个特性.当以后你的属性会是变化的，那么就应该使用v-bind
例如:动态绑定style和class.(既是告诉我们这该属性,我们在' 变量' 中的内容它是个变量不是个字符串)
2、举例：
1、img的src从imageSrc变量中取得
----------------------------v-bind:属性="变量"--------------------------------------------------------------------------------------
<img v-bind:src="imageSrc" >
2.绑定样式:
2.1、从classA, classB两个变量的值作为class的值
---------------------------动态绑定多个vm实例的变量我们用:class="[变量1,变量2]"----------------------------------------------------------
结果是：<div class="A B"></div>
*怎么用:在变量中,这 变量名是样式,指定样式名使其可变
<div v-bind:class="[classA, classB]">classA, classB</div>
2.2、动态加样式:isRed变量如果为true，则class的值为red，否则没有
----------------------------------使用:class="{样式名:变量}"",.如果变量为true 则加样式--------------------------------------------------------
<div v-bind:class="{hasRed(css名): isRed(变量) }">isred</div>
2.3、div的class属性值一定有classA变量的值，而是否有classB和classC变量的值取决于isB和isC是否为true，二者一一对应
**结合2.1和2.2的动态加变量名 的方法,对它变量多做一次判断
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
3.为style加样式
3.1 变量加字符串的写法:如果动态绑定中其中有一部分是字符串我们要在该字符串再加一个" "并和 变量有+号拼接
列如:+ 'px'
如以后我们为个人网站的偏好的时候 ,我们可以用该中独立为它加样式
------------用:style="{键值 对+ "字符串来拼接" }"----------------------------------------------------------------------------------------------
<div v-bind:style="{ fontSize(css名): size(变量) + 'px' }">size22</div>
3.2、对象数组
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>
4.拼串
4.1、变量加常量的另一种写法(另一种拼串方法)
1.<img v-bind="{src:imageSrc+'?v=1.0'}" >
4.2 常规拼串"变量+"字符创""
<p :src="imgSrc+"?v=1.0""></p>
5. 动态的为属性名绑定个变量,以便将来该属性名可以不断地变化,2.6.0版本后的新特性
--------------------我们使用:[变量] 来绑定动态属性名-----------------------------------------------------------------------------------
<p :[prop]='username'>动态绑定属性</p>
3、缩写形式
<img :src="imageSrc">
<div :class="[classA, classB]">classA, classB</div>
<div v-bind:class="{ red: isRed }">isred</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
<div v-bind:style="{ fontSize: size + 'px' }">size22</div>
<img v-bind="{src:imageSrc+'?v=1.0'}" >
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>
vue对象初始化
<script>
// 实例化vue对象（MVVM中的View Model）
export default {
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data(){
return {
// 数据 （MVVM中的Model）
imageSrc:'http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png',
isRed:true,
classA:'A',
classB:'B',
isB:true,
isC:true,
size:22,
styleObjectA:{color:'red'},
styleObjectB:{fontSize:'30px'}
}
},
methods:{
}
}
</script>
<style lang='less'>
.hasRea{
color:red;
}
</style>
注意
\\引入图片 在脚手架中可用 @指当前的根目录,既是入口文件main.js所在的目录
import img '@/vue/vuebase/chapter1/imgs/d1-11.png'
<script>
// 实例化vue对象（MVVM中的View Model）
export default {
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data(){
return {
// 数据 （MVVM中的Model）
imageSrc:img,
}
},
methods:{
}
}
</script>
