VueJS样式绑定之内联样式v-bind:style
我们可以在 v-bind:style 直接设置样式：
直接添加样式属性
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
</div> <script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
</script>
</body>
</html>
效果如图：
绑定到样式对象
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">绑定样式对象</div>
</div> <script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
}
}
})
</script>
</body>
</html>
效果如图：
多样式绑定
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">多样式绑定</div>
</div> <script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'green',
fontSize: '30px',
background:'red'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
</body>
</html>
效果如图：
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
VueJS样式绑定之内联样式v-bind:style的更多相关文章
- vue绑定内联样式
v-bind:style 的对象语法十分直观--看着非常像 CSS ,其实它是一个 JavaScript 对象. CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case) ...
- wxss--外联样式与内联样式
外联样式 有样式表a.wxss和index.wxss如下: /**a.wxss**/ .container1{ border: 1px solid #000; } /**index.wxss**/ . ...
- Vue.js绑定内联样式
1.对象语法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- vue 绑定 class 和 内联样式（style）
<div id="app31"> <!--多个属性 ,号隔开--> <!-- v-bind:style="{fontSize: fontSi ...
- Vue.js学习 Item6 -- Class 与 样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此 ...
- Vue.js：样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- 一起学Vue之样式绑定
在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
随机推荐
- COGS 2485. [HZOI 2016]从零开始的序列
2485. [HZOI 2016]从零开始的序列 ★★ 输入文件:sky_seq.in 输出文件:sky_seq.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] ...
- BZOJ 3640: JC的小苹果
3640: JC的小苹果 Time Limit: 15 Sec Memory Limit: 256 MBSubmit: 425 Solved: 155[Submit][Status][Discus ...
- IIC知识
任何一个微处理器都要与一定数量的部件和外围设备连接,但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接,那么连线将会错综复杂,甚至难以实现.为了简化硬件电路设计.简化系统结构,常用一组线路 ...
- android基本控件学习-----TextView
一.TextView的讲解 <实例一> <?xml version="1.0" encoding="utf-8"?> <Linea ...
- Current Sourcing (拉電流) and Current Sinking（灌電流）
Current Sourcing and Sinking Current sourcing and sinking is often mentioned in relation to electron ...
- 安装聊天软件telegram-cli
Telegram是一款加密通信的聊天软件,可以在linux,windows,android,chrome等运行.官方网址:https://telegram.org/ 它是有桌面版的,但作为一个linu ...
- AC日记——还是01串 51nod 1396
还是01串 思路: 前缀和: 来,上代码: #include <cstdio> #include <cstring> #include <iostream> #in ...
- Codeforces Gym101063 J.The Keys (2016 USP-ICMC)
J.The Keys Out of all science labs constructed by the GEMA mission on Mars, the DSL - Dangerous Spec ...
- LOJ N！在不同进制的位数
lightoj1045 - Digits of Factorial (N!不同进制的位数) 对于一个B进制的数,只需要对其取以B的对数就可以得到他在B进制情况下的位数(取了对数之后可能为小数,所以还需 ...
- GRDB自定义的纯函数
GRDB自定义的纯函数 在GRDB中,用户可以自定义SQlite函数.这样,在SQL语句中,可以直接调用这些函数.但是在定义的时候,用户需要指定函数的pure属性,表示该函数是否为纯函数.纯函数是 ...