Vue stage3
<body>
<div id="box1">
<div v-bind:class="{ 'active': isActive， 'error': isError}"></div>
<!-- 类名active依赖于数据isActive -->
</div>
<div id="box2">
<div v-bind:class="classes"></div>
</div>
<div id="box3">
<div v-bind:class="[activeCls,errorCls]"></div>
<!-- <div v-bind:class="[isActive ? activeCls : '' ,errorCls]"></div>
<div v-bind:class="[{isActive ? activeCls : '' },errorCls]"></div> -->
<!-- 这几种写法是一样的 -->
</div>
<div id="toggleBox" v-bind:class = "classes" :style="styles"> </div>
</body>
<script>
//v-bind指令
//常见的需求有对元素的样式名称与内联样式style的动态绑定
var app = new Vue({
el:"#box1",
data:{
isActive:true,
isError:false
}
});
var app2 = new Vue({
el:"#box2",
data:{
isActive:true,
error:null
},
computed: {
classes:function(){
return {
active:this.isActive && !this.error,//与，当isActive为true且没有错误时才添加该类名
'text-fail':this.error && this.error.type === 'fail'//当报错且错误类型为fail时启用
}
}
},
});
var toggle = new Vue({
el:"#toggleBox",
data:{
size:'large',
disabled:true,
styles:{
color:"red",
fontSize:"15px",//15 + 'px'
backgroundColor:white
}
},
computed: {
classes:function(){
return [
'btn',{
['btn-' + this.size]: this.size !== '',//当size不为空值时，相当于btn-large:true，即会应用btn-large样式
['btn-disabled']: this.disabled
// 在写复用的组件时特别快乐，如ui-header-menu-cell...
}
]
}
},
});
</script>
Vue stage3的更多相关文章
- ASP.NET Core + Vue.js 开发
1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...
- Vue ElementUI 按需引入
一.element UI组件的单独使用(第一种方法): 1.cnpm install babel-plugin-component -D 2.找到.babelrc 配置文件 ...
- Vue.JS React 精彩文章汇总
JavaScript深入系列 [干货] JavaScript数组所有API全解密 [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...
- vue+elementui按需引入
转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...
- vue 异步请求
摘自 ECMAScript 6 简介: 大家习惯将 ECMAScript 6.0 简称为 ES6,它是 Javascript 语言的下一代标准,它的目标,是使得 Javascript 语言可以用来编写 ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- 基于Vue的Ui框架
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...
- vue使用element-ui实现按需引入
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.ele ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
随机推荐
- Python中serial的使用
一.概述 pyserial模块封装了对串口的访问. 二.特性 在支持的平台上有统一的接口. 通过python属性访问串口设置. 支持不同的字节大小.停止位.校验位和流控 ...
- python中常见的报错，总结一下，以后看。
AttributeError 试图访问一个对象没有的属性,比如,乔峰.nameIOError 输入.输出异常:基本上无法打开文件ImportError 无法引入模块或者是包:基本上是路径问题,或者是名 ...
- Postman 使用方法详解
转自:https://blog.csdn.net/fxbin123/article/details/80428216 一.Postman背景介绍 用户在开发或者调试网络程序或者是网页B/S模式的程序的 ...
- Python实例之抓取HTML中的数据并保存为TXT
本实例实现了抓取捧腹网中存储于html中的笑话数据(非JSON数据) 通过浏览器相关工具发现捧腹网笑话页面的数据存储在HTML页面而非json数据中,因此可以直接使用soup.select()方法来抓 ...
- 终于懂得Perl句柄是什么意思了
一直以来就对Perl语言特别感兴趣,去年特别膨胀的 直接买了一本大骆驼书,想好好看看Perl编程,结果看到I/O,句柄的时候就觉得云山雾罩,不知道是在说啥了, 最近,京东打折,终于有机会又买了本小骆驼 ...
- R实用小技巧
输出重定向 # 文本重定向 # cat cat("hello",file="D:/test.txt", append=T) # sink("filen ...
- nc--windows下工具分享
1.在windows下安装了9个memcached. 一些测试需要经常对这9个memcached的执行flush_all的操作 由于windows没有linux那样可以使用nc命令. 经过不懈搜索,找 ...
- Java ConcurrentHashMap存入引用对象时也是线程安全的
本人小白,看到资料说ConcurrentHashMap是线程安全的,get过程不需要加锁,put是线程安全的,推荐高并发时使用.但是本人不清楚是否该map中存入的引用类型对象,对象属性变化也是否线程安 ...
- centos7安装配置tomcat9
什么是Tomcat Tomcat是由Apache软件基金会下属的Jakarta项目开发的一个Servlet容器,按照Sun Microsystems提供的技术规范,实现了对Servlet和JavaSe ...
- 数据分组分析—-groupby
数据分组分析—-groupby 代码功能: 对于综合表格data,基于title进行分组处理,并统计每一组的size,得到的是一个series序列,此序列可以放入索引中使用,index() impor ...