文档章节

Class与Style绑定

BK灬
 BK灬
发布于 2017/04/21 17:06
字数 213
阅读 7
收藏 0
<html>
	<head>
		<title>VUE.JS实例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
		<style type="text/css">
			text10pxwhite { font-size:10px; color: #FFFFFF;}
		</style>
	</head>
	<body>
		<!-- 对象语法 -->
		<div id = "result1" class="static"
			 v-bind:class="{ active: isActive, 'text-danger': hasError }">
		</div>
		<!-- 数据对象 -->
		<div id = "result2"  class="static" v-bind:class="classObjectt"></div>
		<!-- 数组语法 -->
		<div id = "result3" v-bind:class="[activeClass,errorClass]"></div>
		<!-- 组件 -->
		<div id = "result4">
			<my-component class="baz boo"></my-component>
		</div>
		<!-- 绑定内联样式-->
		<div id="result5" v-bind:style="styleObject"></div>
		<script>
			result1 = new Vue({
				el : '#result1',
				data : {
					// 语法表示 class{active} 的更新将取决于数据属性 isActive 是否为真值
					isActive : true,
					// 当 isActive 或者 hasError 变化时,class 列表将相应地更新
					hasError : false
				}
			
			});
			result2 = new Vue({
				el : '#result2',
				data: {
					  isActive: true,
					  error: null
					},
					computed: {
					  classObject: function () {
						return {
						  active: this.isActive && !this.error,
						  'text-danger': this.error && this.error.type === 'fatal',
						}
					  }
					}
			});
			result3 = new Vue({
				el : '#result3',
				data : {
					activeClass : 'active',
					errorClass : 'text-danger'
				}
			});
			Vue.component('my-component', {
			  template: '<p class="foo bar">Hi</p>'
			});
			result5 = new Vue({
				el : '#result5',
				data: {
				  styleObject: {
					color: 'red',
					fontSize: '13px'
				  }
				}
			});
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 条件渲染
下一篇: 计算属性
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 0
朝阳
后端工程师
私信 提问
v-bind 及 class 与 style 绑定

DOM 元素经常会动态地绑定一些 class 类名或 style 样式。 一、了解 v-bind 指令 v-bind 指令的主要用法是动态更新 HTML 元素上的属性,可使用 v-bind 指令绑定 class 和 style 。如下,示例...

Mr_ET
2018/10/20
0
0
Vue2.0笔记——属性绑定和Class与Style绑定

属性绑定 通过指令v-bind可以绑定属性,该指令同v-on一样,也有一个简写,“:”冒号。 绑定元素的属性,并且可与元素的原属性共存。当原属性有值时则显示原属性的值,无值则使用绑定的值。 ...

逝岁月
2018/04/15
0
0
深入解析VueJs中的V-bind指令

v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.这次主要介绍了VueJs中的V-bind指令,需要的朋友可以参考下 v-...

前端攻城老湿
2018/11/29
0
0
一步一步教你在GridView中实现可收缩的面板

1、创建一个TestDB数据库: 添加一张表Table_1,并向其中添加一些数据,表结构如下图。 2、新建一个asp.net网站。 在Default.aspx上拖放一个GridView。在页面上加入下面切换层的js代码: fu...

王二狗子11
2018/01/01
0
0
怎么做到点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件?

例如一下的代码: html: 父元素 子元素 我想要达到的目的是,点击子元素区域只会触发子元素的事件,输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”. 请各路大神赐教...

issac宝华
2016/06/16
5.8K
7

没有更多内容

加载失败,请刷新页面

加载更多

data.world

产品思路: 1、共享数据集。 2、数据结构化。 3、数据展示。 https://data.world

colin_86
30分钟前
2
0
冒泡排序的三种写法

冒泡排序是程序员最耳熟能详的排序了,本文简单叙述下我写过的三种冒泡排序写法。 冒泡,顾名思义,待排序的数字像气泡一样,通过比较,以升序或降序的方式排序。 我最开始是这样写冒泡排序的...

niithub
56分钟前
4
0
Akka实战:HTTP大文件断点上传、下载,秒传

访问:https://github.com/yangbajing/scala-applications/tree/master/file-upload 获取本文所述完整源码,包括Akka HTTP后端和HTML5实现的前端。 在很多应用里面都会有类似大文件上传的需求...

羊八井
今天
5
0
node:event-loop & 宏任务 & 微任务

event-loop(事件轮询) 代码进入执行栈后会判断当前代码是同步任务还是异步任务,如果是同步任务则会将任务调到主线程同步执行,如果是异步任务则会将任务调到异步队列中。 主线程同步任务执...

小草先森
今天
3
0
php-fpm配置文件详解

php-fpm配置文件详解 php-fpm配置文件路径: /usr/local/php-fpm/etc/php-fpm.conf ,还包含了一个配置文件路径下的所有以.conf结尾的配置文件(子配置文件)/usr/local/php-fpm/etc/php-fp...

李超小牛子
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部