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 ...
随机推荐
- LVS Mode&Method
LVS NAT 模式: Summary: 普通的NAT模式为DNAT,即只更改目的地址,不改源端口. LVS在转发报文时,将Client的源IP透传给Server,类似于透明传输. 优点: 1. 可提 ...
- Secure services with TLS ---Docker配置https
官方文档:https://docs.docker.com/ee/ucp/interlock/usage/tls/
- SPOJ QTREE4 SPOJ Query on a tree IV
You are given a tree (an acyclic undirected connected graph) with N nodes, and nodes numbered 1,2,3. ...
- Nim积
假如把Nim游戏的取胜规则改为谁取走最后一个石子谁输的话 先手必胜当且仅当: 1.所有堆的石子数都为1且游戏的SG值为0 2.有些堆的石子数大于1且游戏的SG值不为0
- 刷leetcode是什么样的体验？【转】
转自:https://www.zhihu.com/question/32322023 刷leetcode是什么样的体验? https://leetcode.com/ 1 条评论 默认排序 按时间排 ...
- Action 和 Func 的用法以及区别
Action 无返回值 Func 有返回值,且最后一个参数为返回值 Action用法 public static void test(string s) { Console.WriteLine(&qu ...
- 如何配置tomcat环境变量
首先下载tomcat,并且解压到目录: 注意:2,3步的变量值要到下图这一步 即,bin的上一级目录不包含bin 1.第一步鼠标右键计算机->属性->高级系统设置,进去之后,点击环境变量, ...
- BZOJ4017 小Q的无敌异或(位运算)
题目链接 小Q的无敌异或 好久之前做的这道题了……参照了别人的博客……还是没有全懂. 第一个问题维护个前缀就好了,第二个问题还要用树状数组维护…… #include <bits/stdc++.h ...
- Akka 和 μJavaActors入门
Akka和μJavaActorsμJavaActors均是java的Actor库,其中Akka提供了叫为完整的Actor开发框架,较为庞大,学习成本很高,μJavaActors 是一个轻量级 ...
- Network | TCP
Transmission Control Protocol, TCP是一种面向连接的.可靠的.基于字节流的传输层通信协议. 应用层向TCP层发送用于网间传输的.用8位字节表示的数据流,然后TCP把数据 ...