vue 怎么绑定属性? 下面本篇文章给大家简单介绍一下 vue 属性绑定. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
VUE 属性绑定
class 与 style 是 html 元素的属性, 用于设置元素的样式, 我们可以用 v-bind 来设置样式属性.
vue.js v-bind 在处理 class 和 style 时, 专门增强了它. 表达式的结果类型除了字符串之外, 还可以是对象或数组.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- VUE 绑定属性
- </title>
- <script src="js/vue.min.js">
- </script>
- <style>
- .bg{ width:400px;height: 400px; background: #FF0000; } .text-danger{ border:
- 1px solid #00f; }
- </style>
- </head>
- <body>
- <div id="app">
- <div v-bind:class="{bg:isBg,'text-danger':hasError}">
- </div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- isBg: true,
- hasError: true
- }
- })
- </script>
- </body>
- </HTML>
也可以以另外的格式:
我们知道在 CSS 中有行内样式, 现在可以通过 VUE 内联样式来实现:
效果 如下:
前端代码:
也可以把 {color:activeColor,fontSize:fontSize+'px'} 变成一个样式对象 styleObject, 在 VUE 代码中对其进行设置:
继续升级, 使用数组, 将多个样式绑定到一个对象上:
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17019.html