使用v-bind绑定一个 超链接 绑定一个图片地址
<body>
<div id='app'>
<a v-bind:href="url">ok</a>
<img :src="imUrl" alt="">
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com',
imUrl:'https://www.baidu.com/img/bd_logo1.png?where=super'
}
})
</script>
'显示结果 为 一个链接 和一个'
绑定class (用对象的方法绑定class)
<style>
.demoStyle{
width: 50px;
height: 60px;
background: #444444;
border: 1px saddlebrown solid;
}
.borderStyle{
border: 10px solid #666;
}
</style>
<body>
<div id='demo'>
<div :class='{demoStyle : isActive,borderStyle:isBorder}'></div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
isActive:true,
isBorder:true
}
})
</script>
' * <div :class='{demoStyle:isActive,borderStyle:isBorder}'></div> {键:值（布尔true/false）} 当值为true时用引用 键 当值为false时 不引用键 '
'* 显示结果 div 引用了 demoStyle borderStyle 的样式 '
###以计算属性返回
<style>
.demoStyle{
width: 50px;
height: 60px;
}
.buttonSize{
width: 100px;
height: 30px;
transition: all 1s;
}
.borderStyle{
border:skyblue 1px solid;
background:salmon;
color: #fff;
border-radius: 4px;
margin-top: 40px;
}
.buttonChange{
color: #fff;
background:royalblue;
border-radius: 4px;
margin-top: 40px;
text-align:center;
line-height: 30px;
}
</style>
<body>
<div id='demo'>
<div :class="className">2</div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
isActive:true,
isChange:true,
isBorder:true,
isSize:true
},
computed:{
className:function(){
return { buttonSize:this.isSize && this.isChange,buttonChange:this.isChange}
}
}
})
</script>
</html>
'computed 钩子 返出去对象'
数组语法
.active{
width: 100px;
height: 100px;
background:coral;
}
.error{
border:seagreen 1px solid;
}
</style>
<body>
<div id='demo'>
<div :class="[activeClass,errorClass]"></div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
activeClass:'active',
errorClass:'error'
}
})
</script>
'数组中的成员直接对应类名'
对象语法数组语法混用
<style>
.buttonSize{
width: 100px;
height: 30px;
transition: all 1s;
}
.active{
width: 100px;
height: 100px;
background:coral;
}
.error{
border:seagreen 1px solid;
}
</style>
<body>
<div id='demo'>
<!-- <div :class='{demoStyle : isActive,borderStyle:isBorder}'></div> -->
<!-- <button :class="{buttonSize : isSize, borderStyle : isBorder, buttonChange:isChange }" @click="changeColor" >点击变色</button>
<div :class="className">2</div>
<div :class="[activeClass,errorClass]"></div> -->
<div :class="[{buttonSize:isSize},activeClass]"></div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
isSize:true,
activeClass:'active',
errorClass:'error'
}
})
</script>
绑定内联样式
<body>
<div id='demo'>
<div :style="{'color':color,'fontSize':fontSize}">1123</div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
color:'red',
fontSize:'16px'
}
})
</script>
'vue 不会解析 font-size 直接写fontSize 就等于font-size: ##每个大写字母前边都会加个 - 例如 aBCd 会被Vue转换成 a-b-cd ##'
绑定行内 数组形式
<div :style="[styleA,styleB]"></div>
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
styleA:{
color:'red',
fontSize:'16px'
},
styleB:{
width:'100px'
}
}
})
</script>
