Vue指令中的v-bind之动态更改样式
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。语法：v-bind:属性名，可以简写为:属性名每个绑定，都只能包含单个表达式。代码如下：<style>.yuan{width: 100px;height: 100px;border-radius: 50%;background...
·
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。
语法：v-bind:属性名，可以简写为:属性名
每个绑定，都只能包含单个表达式。代码如下：
<style>
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div :class="if(true){return yuan}else{ruturn red}"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
computed:{
divClass:function(){
return {yuan:true,red:false}
}
}
})
</script>代码不会生效，控制台也不会报错。此时可以采用三元表达式。
正确代码如下：
<style>
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div :class="[isActive ? yuanClass : '', redClass]"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
isActive:true,
yuanClass:'yuan',
redClass:'red'
}
})
</script>
表达式的结果可以是：1.字符串；2.对象；3.数组
基础使用代码如下：
<div id="app">
<!-- <a v-bind:href="href">百度</a> 简写为<a :href="href">百度</a>-->
<a :href="href">百度</a>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
href:"https://www.baidu.com/"
}
})
</script>
v-bind动态更新样式的方法有：1.绑定class;2.绑定style
1.绑定class
代码如下：
<style>
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div :class="divClass"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
computed:{
divClass:function(){
return 'yuan red'
}
}
})
</script>执行效果如下：
1.表达式的结果是对象。
通过改变对象键值，（true 或者false）来达到控制类的增加和删除。代码如下：
<style>
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div :class="divClass"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
computed:{
divClass:function(){
return {yuan:true,red:false}
}
}
})
</script>执行效果如下：
备注：v-bind:class指令可以和普通的class属性共存，如下代码：
2.表达式的结果是数组
代码如下：
<style>
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="[divClass,{height:height+'px'}]"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
height:300
},
computed:{
divClass:function(){
return {yuan:true,red:false}
}
}
})
</script>执行效果如图：
2.绑定style
表达式的结果同class一样，可以是1.字符串；2.对象；3.数组
css属性可以采用驼峰式（camelCase）或者短横线分隔（kebab-case）命名,如果采用短横线分隔命名，必须要加上引号。
如果使用短横线分隔命名，不加引号，代码不会生效，如下代码：
<style>
.shape{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<div :style="{background-color:color,width:width+'px'}" class="shape"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
color:'blue',
width:200
}
})
</script>正确的代码如下：
<style>
.shape{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<div :style="{'background-color':color,width:width+'px'}" class="shape"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
color:'blue',
width:200
}
})
</script>执行效果如下：
1.表达式结果是对象
可以直接绑定一个样式对象，以便让模板更加清晰，代码如下：
<style>
.shape{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<div :style="styleClass" class="shape"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
styleClass:{
'background-color':'blue',
width:200
}
},
})
</script>使用驼峰式命名则不需要加引号。
代码如下：
<style>
.shape{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<div :style="{backgroundColor:color,width:width+'px'}" class="shape"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
color:'blue',
width:200
}
})
</script>
</body>代码执行效果如下：
2.表达式结果是数组
使用v-bind:style可以将多个样式对象应用到同一个元素上，代码如下：
<style>
.shape{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<div :style="[{backgroundColor:'blue'},{width:width+'px'}]" class="shape"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
width:200
},
})
</script>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)