zookeeper python接口实例详解
224
2023-04-28
详解VUE中v
这两天学习了v-bind的基本用法,所以,今天添加一点小笔记。
1. v-bind:class(根据需求进行选择)
1.1
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
我是字
new vue({
el: "#app",
data:{
isColor:true,
isSize:true
}
})
1.2
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
我是字
new Vue({
el: "#app",
data:{
classObject:{
'textColor': true,
'textSize': true
}
}
})
1.3
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
我是字
</div>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize'
}
})
1.4
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
我是字
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize',
isA: false
}
})
2.v-bind:style (根据需求进行选择,驼峰式)
2.1
我是字
new Vue({
el: "#app",
data:{
activeColor: 'red',
size: '30px',
shadow: '5px 2px 6px #000'
}
})
2.2
我是http://字
new Vue({
el: "#app",
data:{
styleObject:{
color: 'red',
fontSize: '30px',
textShadow: '5px 2px 6px #000'
}
}
})
2.3
我是字
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
}
}
})
2.4
我是字
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
},
isA: false
}
})
3.v-bind:src
new Vue({
el: "#app",
data:{
url: "../img/pg.png"
}
})
4.v-bind:title
new Vue({
el: "#app",
data:{
message:"我是吱吱"
}
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~