Vue04- 样式使用

1、v-bind:class

v-bind:class的值可以是如下四种：

数组
数组中使用三元表达式
数组中嵌套对象
直接使用对象

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/vue-2.4.0.js"></script><style>.red {color: red;}.thin {font-weight: 200;}.italic {font-style: italic;}.active {letter-spacing: 0.5em;}</style>
</head><body>
<div id="app"><h1 class="red thin">十年生死两茫茫，不思量，自难忘。</h1><!-- 方式1： 直接传递一个数组， 注意： class需要用v-bind做数据绑定 --><h1 :class="['thin', 'italic']">千里孤坟，无处话凄凉。</h1><!-- 方式2： 在数组中使用三元表达式 --><h1 :class="[ 'italic', flag?'active':'' ]">纵使相逢应不识，尘满面，鬓如霜。</h1><!-- 方式3： 在数组中使用对象来代替三元表达式 --><h1 :class="[ 'italic', {'active':flag} ]">夜来幽梦忽还乡，小轩窗，正梳妆。</h1><!-- 方式4： 使用对象，对象属性名是类名，可以加引号也可不加；属性是一个标识符 --><h1 :class="{ red: true, thin: true, italic: flag, active: false }">相顾无言，惟有泪千行。</h1><h1 :class="classObj">料得年年肠断处，明月夜，短松冈。</h1>
</div><script>var vm = new Vue({el: '#app',data: {flag: true,classObj:  { red: true, thin: true, italic: true, active: false }},methods: {}});
</script>
</body>
</html>

2、v-bind:style

v-bind:style的值可以是：

样式对象定义
样式对象
样式对象数组

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/vue-2.4.0.js"></script>
</head><body>
<div id="app"><!-- 方式1: `:style`直接跟样式对象定义 （JS对象：就是无序键值对的集合，当属性名有短横杠(-)是必须带引号）  --><h1 :style="{ color:'red', 'font-weight':200 }">春天了，天空像蓝色的丝绸大衣</h1><!-- 方式2: `:style`+样式对象  --><h1 :style="styleObj1">夜晚给她镶上了星星的宝石。</h1><!-- 方式3: `:style`+样式对象数组  --><h1 :style="[styleObj1, styleObj2]">花儿开了，又要谢了。如果你来， 还能赶上，最美的花落。</h1>
</div><script>var vm = new Vue({el: '#app',data: {styleObj1: { color:'red', 'font-weight':200 },styleObj2: { 'font-style': 'italic' }},methods: {}});
</script>
</body>
</html>

Vue04- 样式使用相关推荐

【B/S实践】解决：vs中修改样式表后不起作用的问题
缓存,有好多,cpu和内存之间的三级缓存,浏览器内的缓存! 缓存是因为速率不对等,通过缓存来加速内容的显示! 今天我在敲牛腩的时候遇到一个问题,找了半小时,才发现是缓存导致的问题! 试着运行aspx文 ...
Python：matplotlib实践：直方图、散点图展示、变色、线条变换、点样式变换、添加名称、设置横纵轴范围、在一张图上显示多条线
直方图: ''' 来源:天善智能韦玮老师课堂笔记作者:Dust ''' # 折线图.散点图 import matplotlib.pylab as pyl import numpy as npy x= ...
html 样式的几种实现方法
html 样式 : 一般使用 css 来渲染HTML元素标签的样式. 一般有四种方法实现 1 行内样式在HTML标签中直接用style添加 , 最直接,同时修改也很不方便一般呢都不建议使用如下 ...
android Style(样式)的解析
先说下为啥要使用样式吧,举个例子来说吧当要做这样的一个布局的时候每个标签都要写的话,会感觉怎样 <LinearLayoutandroid:layout_width="match_p ...
常用样式积累-scss
/*** author ctj -- 自定义公用样式*/ /*清除浮动*/ .clearfix:after {height: 0;content: '';display: block;clear: b ...
java中对Excel的创建、样式修改
创建excel文件 public static String createExcel(ArrayList<String> list, ArrayList<ArrayList<S ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
Windows Phone开发（16）：样式和控件模板
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...
Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

Vue04- 样式使用

1、v-bind:class

2、v-bind:style

Vue04- 样式使用相关推荐

最新文章

热门文章