css vue 内联_Vue绑定内联样式问题

使用 v-bind:style可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS:

示例

var app = new Vue({

el: '#app',

data: {

color: 'red',

fontSize: 14

});

CSS属性名称使用驼峰命名(camelCase)或短横分隔命名(kebab-case),渲染后的结果为:

文本

大多数情况下,直接写一串的样式不便于阅读和维护,所以一般写在data或computed里,以data为例写上面的示例:

示例

var app = new Vue({

el: '#app',

data: {

color: 'red',

fontSize: 14 + 'px'

});

应用多个样式对象时,可以使用数组语法:

文本

在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面; 而较为常用的应用是计算属性.

另外,使用:style时,Vue.js会自动给特殊的CSS属性名称增加前缀,比如transform.

总结

以上所述是小编给大家介绍的Vue绑定内联样式问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

css vue 内联_Vue绑定内联样式问题相关推荐

vue map遍历_vue中内嵌百度地图
1.申请百度地图秘钥在vue项目的index.html文件中引入 <script src="//api.map.baidu.com/api?v=2.0&ak=您的秘钥&quo ...
vue获取css内容进行替换_Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式 ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
vue 绑定内联样式的写法
1.对象语法(看官网教程的命名方法,截图如下) CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名 <li :style=&qu ...
vue 条件判断绑定内联样式
当需要判断条件来绑定内联样式时可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verif ...
vue改变class内的属性_vue绑定html的class属性的方法
一.对象语法绑定class属性 class的属性代码如下 .red{ color: red; width: 100px; height: 100px; border: 2px; border-colo ...
在vue中怎么写行内样式高_vue v-bind绑定行内样式
使用 v-bind 指令去绑定行内样式,即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式. style中直接定义样式下面实例中我们将直接在 v-bind:style 属 ...
绑定内联样式 :style
绑定内联样式 :style <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...

css vue 内联_Vue绑定内联样式问题

css vue 内联_Vue绑定内联样式问题相关推荐

最新文章

热门文章