Vue中使用内联方式的3中方式

1、直接在元素上通过：style的形式，书写样式对象

<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗？</h1>

实例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vueApp</title>
</head><body><div id="app"><h1 :style="{'color':'red','font-weight':200}">你会freestyle吗？</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {},methods: {}});</script>
</body></html>

2、将样式对象定义到data中，再引用

（1）先在data中定义样式对象

 data: {styleObj1: {'color': 'red','font-weight': 200}},

（2）在元素中通过属性绑定的方式，将样式对象应用

<h1 :style="styleObj1">你会freestyle吗？</h1>

3、使用数组，引用多个data上的样式对象

  data: {styleObj1: {'color': 'red','font-weight': 200},styleObj2: {'letter-spacing': '0.5em','font-style': 'italic'}},

<h1 :style="[styleObj1,styleObj2]">你会freestyle吗？</h1>

可以看得出来，在内联样式的使用上，Vue也更加倾向于使用对象和对象数组的方式。

Vue中使用使用内联样式相关推荐

将html中的style内联样式转换为行内样式
需求:因为有一段html需要传递到其他的地方,内联样式可能与其他的样式冲突,所以要将写在style标签中的内联样式转换为行内样式思路: /*** 参数接收html字符串* 将内联样式表里面的样式改为 ...
vue 条件判断绑定内联样式
当需要判断条件来绑定内联样式时可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verif ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
react里面内联css样式怎么样_React.js内联样式最佳做法
小编典典目前还没有很多"最佳实践".我们中那些使用内联样式作为React组件的人仍在进行大量试验. 全部还是全部? 我们所称的"样式"实际上包括许多概念: 布 ...
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
在Vue中使用样式——使用内联样式
使用内联样式
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
html 中内联样式表,html – CSS带有内联样式的伪类
不,这是不可能的.在使用CSS的文档中,内联样式属性只能包含属性声明;在样式表中的每个规则集中出现的同一组语句.从 Style Attributes spec: The value of the st ...

Vue中使用使用内联样式

Vue中使用使用内联样式

Vue中使用内联方式的3中方式

1、直接在元素上通过：style的形式，书写样式对象

2、将样式对象定义到data中，再引用

3、使用数组，引用多个data上的样式对象

Vue中使用使用内联样式相关推荐

最新文章

热门文章