Vue（九）：样式绑定v-bind示例
Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
各种写法代码示例
<style>
.active {
width: 100px;
height: 30px;
background: #FFFACD;
}
.active1 {
background: #F0F8FF;
}
.styleWidth{
width: 200px;
}
.styleHeight{
height: 100px;
}
.styleColor{
background: #FAF0E6;
}
.computedStyle{
width: 210px;
height: 30px;
background: #CAFACD;
}
.arrayStyle1{
width: 180px;
height: 30px;
}
.arrayStyle2{
background: #FAFCAA;
}
.arrayStyle3{
background: #DAFAFF;
}
</style>
</head>
<body>
<div id="app">
<!-- 样式绑定 -->
<div v-bind:class="{active:isActive}">样式绑定</div>
<!-- 样式覆盖 -->
<div v-bind:class="{active:isActive, active1:isActive1}">样式覆盖</div>
<!-- 绑定数据对象 -->
<div v-bind:class="styleA">绑定数据对象</div>
<!-- 绑定返回对象的计算属性 -->
<div v-bind:class="styleB">绑定返回对象的计算属性</div> <!-- 数组语法 -->
<div v-bind:class="[arrayStyle1,arrayStyle2]">数组语法</div>
<!-- 使用三元表达式切换属性 -->
<div v-bind:class="[arrayStyle1, isActive?arrayStyle3:'']">使用三元表达式切换属性</div> <!-- 内联样式,注意v-bind是style，不是class了 -->
<div v-bind:style="{width: neilian.width + 'px' ,height: neilian.height + 'px' ,background: neilian.bgcolor}">内联样式</div>
<!-- 内联直接绑定到样式对象 -->
<div v-bind:style="neilian2">内联直接绑定到样式对象</div>
<!-- 内联使用数组将多个样式对象绑定到一个元素上 -->
<div v-bind:style="[neilian2,neilian3]">内联使用数组将多个样式对象绑定到一个元素上</div> <!-- 注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。-->
</div> <script>
new Vue({
el: '#app',
data: {
neilian:{
width:280,
height:25,
bgcolor:"#DFFACD"
},
neilian2:{
width:"260PX",
fontSize:'20px'
},
neilian3:{
background: "#CAFACD",
},
arrayStyle1:"arrayStyle1",
arrayStyle2:"arrayStyle2",
arrayStyle3:"arrayStyle3",
isActive: true,
isActive1: true,
styleA:{
styleWidth:true,
styleHeight:true,
styleColor:true
},
msg:{
error:true,
isuse:0
}, },
computed:{
styleB:function(){
return{
computedStyle:this.msg.error && this.msg.isuse==0
}
}
}
})
</script>
</body>
运行结果
Vue（九）：样式绑定v-bind示例的更多相关文章
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- 一起学Vue之样式绑定
在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...
- Vue.js 样式绑定(1)
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue.js 样式绑定
简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...
- Vue.js：样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- Vue样式绑定、事件绑定
1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
随机推荐
- ZOJ-3537
题目大意:给你一个n (n<=300) 边形,给出它所有的顶点坐标,让你把它划分成n-2个三角形的花费最小值,顶点 a 和 b 相连的花费为 abs(a.x+b.x)*abs(a.y+b.y). ...
- BZOJ4972 八月月赛 Problem B 小Q的方格纸 二维前缀和
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ4972 八月月赛Problem B 题目概括 一个矩阵,一坨询问,问矩阵中一个特定方向的等腰直角三角 ...
- Centos7 安装pyquery 等包的简易方法
单独下载安装模块: sudo mkdir /home/pythonmodule sudo wget https://www.crummy.com/software/BeautifulSoup/bs ...
- IBM NOTES
归档含义 邮件容量超过指定的邮件服务器的容量时,会受到警告信息.选择 Archive-Settings 可以设置邮件备份的规则,把邮箱里的部分邮件转移到本地的另一个指定文件夹(如 图 4).当您需要做 ...
- VsVim - Shortcut Key (快捷键)
Enable / Disable NuGet 中提供了禁用按钮.另外还可以通过 Ctrl+Shift+F12 在 Visual Studio 中实现 Enable / Disable. 移动光标类命令 ...
- c#textBox控件限制只允许输入数字及小数点
在textboxd的事件中的 KeyPress 事件,这样双击进入代码:输入以下代码 即可 //判断按键是不是要输入的类型. || () && ( && () e.Ha ...
- 洛谷.3809.[模板]后缀排序(后缀数组 倍增) & 学习笔记
题目链接 //输出ht见UOJ.35 #include<cstdio> #include<cstring> #include<algorithm> const in ...
- mongodb查询后排序
var user = db.getCollection('user') //user.find({},{_id:0}).pretty().count() user.find({age:{$gte:25 ...
- [模板][P3690]Link Cut Tree
Description: 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor和 ...
- [Go] 开发 go web 项目，踩到的一些“坑”
注意:这些“坑”不是bug,只是自己当时没搞明白. 用到的框架为 Beego 1.字典 map 是“引用类型”,本身就是指针,作为参数传递时,直接传 map 变量名即可(不要传 map 变量指针). ...