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示例. 一.访问器属 ...
随机推荐
- JNI中修改(基本类型)参数并返回到Java层使用
最近在JNI相关项目中遇到一个问题:在Java层传入多个int类型的参数,在jni层修改参数值或地址之后重新返回到Java层.这应该算是基本知识了,尤其是基本类型的参数往往看似简单,所以在之前学习jn ...
- Linux设置chrome缓存至内存，及开关机同步
默认chrome缓存位置在~/.cache/google-chrome中,磁盘io很多.为减少磁盘io,保护磁盘同时加快chrome速度,可设置缓存使用内存盘,缺点是重启后缓存丢失,所以这里可以使用脚 ...
- NDK笔记（二）-在Android Studio中使用ndk-build（转）
前面一篇我们接触了CMake,这一篇写写关于ndk-build的使用过程.刚刚用到,想到哪儿写哪儿. 环境背景 Android开发IDE版本:AndroidStudio 2.2以上版本(目前已经升级到 ...
- ROS - 日志
1.日志级别 日志消息分为五个不同的严重级别宏,与Android的Log定义的严重级别类似,如下基础宏: ROS_DEBUG_STREAM.ROS_INFO_STREAM.ROS_WARN_STREA ...
- Mysql LOAD DATA读取客户端任意文件漏洞复现(原理分析)
环境搭建 怎么设置Mysql支持外联? use mysql; grant all privileges on *.* to root@'%' identified by '密码'; //授权语句 fl ...
- 在Visual C++中使用内联汇编
一.内联汇编的优缺点 因为在Visual C++中使用内联汇编不需要额外的编译器和联接器,且可以处理Visual C++中不能处理的一些事情,而且可以使用在C/C++中的变量,所以非常方便.内联汇编主 ...
- 微信中location.reload失效
var len = window.location.href.indexOf("?"); if(len>0){ window.location.href=window ...
- 使用maven插件反向映射generatorConfig.xml生成代码
一.配置Maven pom.xml 文件 <!-- 反向映射 --> <plugin> <groupId>org.mybatis.generator</gro ...
- C++中调用OC代码
前言 最近项目中为了方便维护,底层统一使用C++编写.由于是项目是做屏幕共享sdk,所以只能底层的压缩.编解码使用C++,屏幕捕获部分Mac和win就自己实现了.那么问题就来了,因为是面向接口编程,所 ...
- Dubbo入门到精通学习笔记（十三）：ZooKeeper集群的安装、配置、高可用测试、升级、迁移
文章目录 ZooKeeper集群的安装.配置.高可用测试 ZooKeeper 与 Dubbo 服务集群架构图 1. 修改操作系统的/etc/hosts 文件,添加 IP 与主机名映射: 2. 下载或上 ...