Vue基础语法02
- 属性绑定 v-bind:(可简写为“:”)
v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href
v-bind 和 v-on的区别:
v-bind 绑定属性
v-on 绑定事件
<div class="app">
<input type="text" v-bind:value="msg">
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
}
});
</script>
- 绑定类名v-bind:class
通过v-bind:class = { 键: 值 }
键 代表一个类名 如果这个值 为true 表示 显示这个类名
如果这个值 为false 表示 不显示这个类名
<style>
.in {
background-color: pink;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class={in:inFlag}>
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:true,
}
});
</script>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
}
});
</script>
通过v-bind:class =[ 值1,值2 ]
值1、值2 对应 data 中的 数据
.in {
background-color: pink;
}
.border {
border: 5px solid purple;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class=[inClass,borderClass]>
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
inClass:'in',
borderClass:'border'
}
});
</script>
对象绑定和数组绑定可以混用吗?
数组中可以存储任何数据类型
对象的值中也可以存储任何数据类型
绑定数组和绑定对象有什么区别
绑定对象的时候对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的值 是data 中的数据
类名是可以叠加的,之前存在class 可以通过v-bind:class继续控制其他类名,在页面中是以多类名方式展现
.in {
background-color: pink;
}
.border {
border: 5px solid purple;
}
.h {
height: 50px;
width: 100px;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class=[inClass,borderClass] class="h">
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
inClass:'in',
borderClass:'border'
}
});
</script>
样式绑定之style绑定用法
绑定style 可以使用数组和 对象
v-bind:style = [值1, 值2 ]
数组中的值1 和值2 中存储的是一个对象 这个对象里面存储的 css属性和 属性值
<div class="app">
<input type="text" :style=[style1,style2]>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
style1:{
backgroundColor:'pink',
},
style2:{
border:'5px solid purple',
}
}
});
</script>
v-bind:style = { 键: 值 }
键 代表 CSS的属性 值 中 存贮的是 CSS 属性值
<div class="app">
<input type="text" :style={backgroundColor:red,border:border}>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
red:'red',
border:'5px solid pink'
}
});
</script>