Vue.js 样式绑定(1)
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
background: blue;
}
.active {
width: 100px;
height: 100px;
background: antiquewhite;
} </style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div> <script>
new Vue({
el: '#app',
data: {
/* 后面的覆盖前面的样式*/
errorClass: 'text-danger',
activeClass: 'active'
}
})
</script>
</body>
</html>
效果：
2018-03-20 13:36:35
Vue.js 样式绑定(1)的更多相关文章
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- vue.js 样式绑定
简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
- 一起学Vue之样式绑定
在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
随机推荐
- celery使用多队列
生产者: 文件1: 定义任务 #!/usr/bin/env python3 # coding: utf-8 from celery import Celery import settings pw = ...
- java笔试题大全之IO流常见选择题
1.下面哪个流类属于面向字符的输入流()选择一项)A. BufferedWriterB. FileInputStreamC. ObjectInputStreamD. InputStreamReader ...
- Android VideoView无法播放网络视频
今天学习Android播放视频和音频,其中在练习播放视频的时候无法播放网络视频,网络视频是别人发布在网上的,但是把视频放在本地是可以的,最后推测是没有开放网络的访问权限的问题,果然开放了之后就能正常访 ...
- shell脚本进行设置启动/关闭
vi /etc/init.d/confluence ----------------------------- #!/bin/bash# chkconfig: 2345 85 15# Provides ...
- redis相关笔记(一.安装及单机及哨兵使用)
redis笔记一 redis笔记二 redis笔记三 1.安装 cd /usr/src #进入下载目录(这个目录自己定) yum install -y wget gcc make tcl #安装依赖 ...
- 【leetcode】970. Powerful Integers
题目如下: Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j fo ...
- vmware下搭建openwrt
最近闲来无事,想研究下openwrt, 所以尝试着自己搭建一个来玩玩, 当然这里不是以源码编译的形式,那样太耗时. 首先官网下载已有的系统image, 路径如下 : https://archive. ...
- Vue学习笔记【9】——Vue指令之v-for和key属性
迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...
- access注入篇+sqlmap
access数据库的来历,我就不说了,因为我懒的记,就算记了感觉上也没大多用处,只要记得数据库的结构就行了.先是表名,然后是列名,再者就是数据,我发个实际的图吧,大概就是这么一个结构. 下面,开始说下 ...
- 2017年上半年,一线城市豪宅TOP50成交均价排名
辣眼睛!最新豪宅排行榜来了!释放重磅信号 东方财富网 2017-07-27 08:47 阅读:152 摘要:在中国,在买房这个问题上,不少工薪族都感到亚历山大.但是,在富豪眼里,犯难的是投资哪个房地产 ...