Vue中通过属性绑定为元素绑定style行内样式的实例代码
1.直接在元素上通过:style的形式，书写样式对象
<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
2.将样式对象定义在data中，并直接引用到:style中
1:在data上定义样式
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}
2:在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="styleObj1">这是一个H1</h1>
3.在:style中通过数组，引用多个data上的样式对象
1:在data上定义样式
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
2:在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
完整代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
<h1 :style="styleObj1">这是一个H1</h1>
<h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
});
</script>
</html>
到此这篇关于Vue中通过属性绑定为元素绑定style行内样式的文章就介绍到这了,更多相关vue style行内样式内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍vue绑定class与行间样式style详解，包括了vue绑定class与行间样式style详解的使用技巧和注意事项，需要的朋友参考一下 一、绑定class属性的方式 1、通过数组的方式，为元素绑定多个class 上例为span 绑定2个class,通过设定red_color和bg_color的值，找到对应的class类名 2、通过控制class的true或者false，来使用对应的
-
英文原文：http://emberjs.com/guides/templates/binding-element-attributes/ 除了普通文本，你可能也希望在模板中包含可以将其属性绑定到控制器的HTML元素。 例如，想象一下你的控制器中包含这样一个属性，它包含指向一幅图像的URL地址： 1 2 3 <div id="logo"> <img {{bind-attr src=logoUr
-
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 对象语法 我们可以传给 v-bind:clas
-
1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。 2. 慕课解释 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符
-
本文向大家介绍vue.js绑定class和style样式（6），包括了vue.js绑定class和style样式（6）的使用技巧和注意事项，需要的朋友参考一下 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和
-
如何在Spring Boot中将属性绑定到POJO？ POJO类是第三方库类-我不能将@ConfigurationProperties放在那里 我知道一些实用程序类，如DataBinder，可以帮助，但可能有一个更快的方法。提前谢谢你。