007_Vue style样式绑定

1. style样式绑定处理

1.1. 对象语法

<div v-bind:style="{width: '400px', height: '50px'}"></div>

1.2. 数组语法

<div v-bind:style="[{width: 400px'}, {height: '50px'}]"></div>

2. 对象绑定style

2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>对象绑定style</title></head><body><div id="app"><div><span v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}">对象绑定style</span><br /><button @click="handle1">切换样式</button></div><br /><div><span v-bind:style="objStyle">对象绑定style简化</span><br /><button @click="handle2">切换样式</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {borderStyle: "solid 1px",widthStyle: "400px",heightStyle: "50px",displayStyle: "block",objStyle: {border: "solid 1px", width: "400px", height: "50px", display: "block"}},methods: {handle1: function(event) {this.widthStyle = "200px";},handle2: function(event) {this.objStyle.width = "200px";}}});</script></body>
</html>

2.2. 效果图

2.3. 点击2个切换样式按钮后

3. 数组绑定style

3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>数组绑定style</title></head><body><div id="app"><div><span v-bind:style="[{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}, {color: colorStyle}]">数组绑定style</span><br /><button @click="handle1">切换样式</button></div><br /><div><span v-bind:style="arrStyle">数组绑定style简化</span><br /><button @click="handle2">切换样式</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {borderStyle: "solid 1px",widthStyle: "400px",heightStyle: "50px",displayStyle: "block",colorStyle: "red",arrStyle: [{border: "solid 1px", width: "400px", height: "50px", display: "block"}, {color: "red"}]},methods: {handle1: function(event) {this.widthStyle = "200px";},handle2: function(event) {this.arrStyle[0].width = "200px";}}});</script></body>
</html>

3.2. 效果图

3.3. 点击2个切换样式按钮后

007_Vue style样式绑定相关推荐

vue中绑定style样式的方式
vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式 css样式 <style>.red {color: red}.green {color: green}.big {fo ...
Vue.js框架学习—绑定style样式
一.对象写法模板和Vue实例 <body><div id="root"><div :style="styleObj">{{ ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
WPF 绑定继承的样式提示只能根据带有基类型 IFrameworkInputElement 的目标类型的 Style 样式
在 WPF 中,如果有一个样式是继承另一个样式,而样式没有使用 TargetType 那么在运行的时候会提示只能根据带有基类型 IFrameworkInputElement 的目标类型的 Style ...
Attribute 绑定、类绑定和样式绑定
Attribute 绑定.类绑定和样式绑定 1. 绑定到 Attribute 优先设置带有 Property 绑定的元素的 Property.如果没有可绑定的元素 Property,可以使用 Attr ...
【Ant Design Pro 三】样式动态绑定 react样式绑定
第一步,创建样式文件,在页面目录下根据自己习惯创建一个less文件,用来写样式类第二部,引用该文件 import styles from './details.less'; //details.le ...
案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定
需求:实现简单的加法计算,分别输入数值a和数值b ,点击计算按钮,结果显示在下面. <!DOCTYPE html> <html lang="en"> < ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...

007_Vue style样式绑定

007_Vue style样式绑定相关推荐

最新文章

热门文章