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 ...
随机推荐
- 关于MIS 系统所需技术和含义
操作系统的作用在于 1资源管理 2人机交互.它提供各个应用软件的运行平台,也为用户提供交互界面.所需技术:一.b/s架构B/S结构即浏览器和服务器结构,在这种结构下,用户工作界面是通过WWW浏览器来实 ...
- 【Java】 剑指offer(42) 连续子数组的最大和
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 输入一个整型数组,数组里有正数也有负数.数组中一个或连续的多个整/ ...
- Android 之 tools:context和tools:ignore两个属性的作用
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- 洛谷 p1164 小A点菜 【dp（好题）】 || 【DFS】 【恰好完全装满】
题目链接:https://www.luogu.org/problemnew/show/P1164 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. u ...
- js类型判断-丰富加好用
一, 自己有时候写一些东西,要做类型判断,还有测试的时候,对于原生的和jQuery中的类型判断,实在不敢恭维,所以就写了一个好用的类型判断,一般情况都够用的. function test(type) ...
- 2-sat-总结+例题
https://www.cnblogs.com/31415926535x/p/10644419.html 从寒假就开始准备学2sat,,然后当时了解了一下模板就溜了,,,一直到上个星期,,三月底才好好 ...
- 谷歌浏览器升级引起的BUG
问题描述:在谷歌浏览器中,电脑打开A系统,添加附件时无法弹框. 预期结果:添加附件,可以打开弹框. 问题分析:谷歌浏览器自动升级,自55.0.2883.75后发布的新版本均自动停用Flash插件. 解 ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- BZOJ2366 : 多重历史
建立AC自动机,因为不存在某个串是另一个串的后缀,因此匹配到任意位置都只可能匹配一个串. 预处理出每个串出现的所有位置,总的出现次数为$O(m)$. 设$f[i][j]$表示考虑了前$i$个串,最后一 ...
- 20172302 《Java软件结构与数据结构》第五周学习总结
2018年学习总结博客总目录:第一周 第二周 第三周 第四周 第五周 教材学习内容总结 查找 查找即在某项目组中寻找某一指定目标元素,或确定该组中并不存在此元素.对其进行查找的项目组称为查找池. 1. ...