怎样在 Vue 里面绑定样式属性 ?
在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名 为 键名, 以 css 属性值 为键值 的 键值对, 这种键值对需要以 对象 的形式传进去, 也可以使用 数组 将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.
:class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
<style>
.style1 {
width: 100px; height: 100px; background-color: tomato;
}
.style2 {
margin: 0 auto;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{style1,style2}"></div>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
style1: "style1",
style2: "style2"
}
})
</script>
</body>
</html>
:style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
<style>
.style1 {
width: 100px; height: 100px; background-color: tomato;
}
.style2 {
margin: 0 auto;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:style="[style1,style2]"></div>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
style1: {
"width": "100px",
"height": "100px",
"background-color": "tomato"
},
style2: {
"margin": "0 auto",
"border-radius": "15px"
}
}
})
</script>
</body>
</html>
效果
怎样在 Vue 里面绑定样式属性 ?的更多相关文章
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue v-bind绑定属性和样式
这期跟大家分享的,是v-bind指令.它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式. 绑定属性 最简单的例子,我们有一张图片,需要定义图片的src.我们可以直接在元素的属性里 ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- Vue.js：样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- vue绑定样式
使用三目运算符绑定样式 本来以为使用vue模版写法,在绑定单个样式,也就是一个class类名的时候可以直接书写,就像这样 <div id="app"> <div ...
- vue.js（7）--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue中v-bind绑定样式
近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...
- vue中的js绑定样式
添加class 对象形式添加 activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...
随机推荐
- HTML5调用本地摄像头画面，拍照，上传服务器
实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器: 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(getUserMedia)/上传图片,将图片/视频显 ...
- IntelliJ IDEA 2017.3 搭建一个多模块的springboot项目（二）
上一篇我成功搭建了一个项目,名叫bale-project,下面我们继续搭建子模块. 在项目名称上右键,New->Module,新建一个模块. 这次我们选择Spring Initializr 起个 ...
- 解决Linux下Firefox无法启动的问题
在linux下使用Firefox连接被测系统的GUI,一次偶然操作导致linux系统运行缓慢,Firefox无法正常操作,从system monitor 杀掉所有java进程将Firefox强行关闭. ...
- 笔记：Hive的主要技术改进（Major Technical Advancements in Apache Hive）
http://web.cse.ohio-state.edu/hpcs/WWW/HTML/publications/papers/TR-14-2.pdf (辅助参考:https://cwiki.apa ...
- LC 265. Paint House II
There are a row of n houses, each house can be painted with one of the k colors. The cost of paintin ...
- webstrom配置node语法提示
一.mac下打开设置 二.输入node,找到node.js npm,勾选上对勾就好了. 第三.按住ctr,点击右键可以点进去就可以了.
- Django运行项目时候出现DisallowedHost at / Invalid HTTP_HOST header:
web端错误现象: DisallowedHost at / Invalid HTTP_HOST header: 'ip:8000'. You may need to add u'ip' to ALLO ...
- Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程
1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...
- eclipse创建项目（步骤加图片）
前言: 我曾经大学的专业是计算机科学与技术,但不曾想着走入计算机的世界,看着代码就眼晕. 为了自动化测试,不得被迫认识一下java. 1) 打开Eclipse,界面是这样的: 2) ...
- iclass 鎖機鎖程序破解限制方法-適合于有用google login 的App
此法適合于有用google login 的App,只需要去到 app login 界面, 找到 “log in with google” , 然後向下滾動,找到最下面的 “説明” ,點擊進去,就會見到 ...