Vue学习（二）：class与style绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<style type="text/css">
.static {
font-weight: bold;
} .class-a {
color: blue;
} .class-b {
font-size: 22px;
}
</style>
</head>
<body>
<!--1.绑定 HTML Class-->
<!--对象语法-->
<div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div>
<!--数组语法-->
<div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div>
<div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div> <!--2.绑定内联样式-->
<!--对象语法-->
<div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div>
<div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div>
<!--数组语法-->
<div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
// example 1
let vm1 = new Vue({
el: '#example1',
data: {
isA: true,
isB: false
}
});
console.log(vm1.$el); // example 2
let vm2 = new Vue({
el: '#example2',
data: {
classA: 'class-a',
classB: 'class-b'
}
});
console.log(vm2.$el); // example 3
let vm3 = new Vue({
el: '#example3',
data: {
classA: 'class-a',
classB: 'class-b',
isB: false
}
});
console.log(vm3.$el); // example 4
let vm4 = new Vue({
el: '#example4',
data: {
activeColor: 'red',
fontSize: '30'
}
});
console.log(vm4.$el); // example 5
let vm5 = new Vue({
el: '#example5',
data: {
styleObject: {
color: 'red',
fontSize: '25px'
}
}
});
console.log(vm5.$el); // example 6
let vm6 = new Vue({
el: '#example6',
data: {
styleObjectA: {
color: 'blue',
fontSize: '35px'
},
styleObjectB: {
'text-decoration': 'underline'
}
}
});
console.log(vm6.$el);
</script>
</body>
</html>
结果：
Vue学习（二）：class与style绑定的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Vue教程：Class 与 Style 绑定（四）
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- vue学习二:
vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...
- 02.VUE学习二之数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue学习笔记 样式 class style（五）
使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...
随机推荐
- Sublime Text Build 3065 License key
Sublime Text Build 3065 License key 复制如下三个任意一个正版注册码即可 —– BEGIN LICENSE —– Andrew Weber Single User ...
- html加载顺序以及影响页面二次渲染额的因素
浏览器请求发往服务器以后,返回HTML页面,页面内容开始渲染,具体的执行顺序为: 1. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文 ...
- c# 调用服务返回结果模板化
一般我们返回一个结果,主要有返回值,执行结果信息,所以定义一个类 public class QuestResult { /// <summary> /// 返回值 ...
- [codevs1036] 商务旅行
题目描述 Description 某首都城市的商人要经常到各城镇去做生意,他们按自己的路线去做,目的是为了更好的节约时间. 假设有N个城镇,首都编号为1,商人从首都出发,其他各城镇之间都有道路连接,任 ...
- poj 3259 Wormholes ： spfa 双端队列优化 判负环 O(k*E)
/** problem: http://poj.org/problem?id=3259 spfa判负环: 当有个点被松弛了n次,则这个点必定为负环中的一个点(n为点的个数) spfa双端队列优化: 维 ...
- Linux实战教学笔记
Linux实战教学笔记01:计算机硬件组成与基本原理 Linux实战教学笔记02:计算机系统硬件核心知识 Linux实战教学笔记03:操作系统发展历程及系统版本选择 Linux实战教学笔记04:Lin ...
- Docker 运行MySQL 5.7
#在opt新建挂载目录 cd /opt #-v 显示创建的目录名 mkdir -vp docker_cfg/mysql/data docker_cfg/mysql/logs docker_cfg/my ...
- java程序执行系统命令
String cmd="orakill orcl 1233";//解锁数据库表 Process proc = Runtime.getRuntime().exec(cmd);
- 关于Ext.js和Ext.Net的杂谈
最近几年比较火的前端js框架extjs 算是其中的佼佼者.统一的UI设计,强悍的组件及丰富的插件,对浏览器良好的兼容性等优点使得许多公司使用Extjs,同时也使得无数程序猿开始研究这个玩意也包括我在内 ...
- 吐血分享：QQ群霸屏技术教程2017（活跃篇）
热门词的群排名,在前期优化准备充分的情况下,活跃度不失为必杀技. 在<吐血分享:QQ群霸屏技术(初级篇)>中,我们提及到热门词的群排名,有了前面的基础,我们就可以进入深度优化,实现绝对的霸 ...