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示例. 一.访问器属 ...
随机推荐
- .net EntityFramework dbContext 如何实例化
1 .DbContext怎么在Asp.mvc中使如何实例化 public class Repository { //实例化EF容器:有弊端.一个线程里可能会创建多个DbContext //DbCont ...
- 在MVC4.5.1中使用Ninject
看完Pro ASP.NET MVC5的前14章之后,终于开始了自己的项目搭建. 打算在实际项目中使用Ninject 但是总是出现各种问题.这里记录一下 在书中使用的Ninject的版本是: Insta ...
- Lenovo E42-80安装Linux的注意事项
Lenovo E42-80安装Linux的注意事项 https://www.cnblogs.com/dylanchu/p/9750760.html 1. 用U盘做个liveCD While makin ...
- shell script 二 判断符号【】 shift 偏移量 if then fi
判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...
- oracle入门学习之oracle数据库结构
1. oracle数据库结构 1.1 Oracle可以看做是一个大的数据库???,里面可以创建很多实例; 一个实例对应多个表空间.多个用户; 一个用户只能有一个表空间; 一个表空间可以有多个用户; 一 ...
- vue+cesiumjs的环境搭建【script引入】
[可以看我的博客里另外一篇----- import引入 ,可以不用script引入] 最近做项目要用到cesium,然后参照网上的一些步骤,最后发现报错了,其中有两种错比较多: ① This dep ...
- Centos 更改语言设置为中文
说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 修 ...
- input select 值得绑定与获取
<div style="margin-top:100px"> <!--Input 值得绑定--> <div id="app20"& ...
- [NOI2016]区间 题解(决策单调性+线段树优化)
4653: [Noi2016]区间 Time Limit: 60 Sec Memory Limit: 256 MBSubmit: 1593 Solved: 869[Submit][Status][ ...
- [ZJOI2011]看电影(组合数学/打表+高精)
Description 到了难得的假期,小白班上组织大家去看电影.但由于假期里看电影的人太多,很难做到让全班看上同一场电影,最后大家在一个偏僻的小胡同里找到了一家电影院.但这家电影院分配座位的方式很特 ...