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开发环 ...
随机推荐
- win10下 git运行出现 fatal: open /dev/null or dup failed: No such file or directory
在C:\Window\System32 位置,找到cmd,以管理员运行cmd,输入 sfc/scannow命令,进行修复操作.然后重启就可以用了
- Alpha阶段个人心得
在一个学期的学习中,我从一个只会一个人打打小规模代码的初学者也变成了一个能参与到团队做项目的“入门码农”,而我们团队从一开始对大型项目的望而生畏无从下手变成细分任务各司其职,也了解并感受到github ...
- Python基础：十一、流程控制(if语句、while循环）
一.流程控制——if循环 1.第一种语法: if条件: #引号是将条件与结果分开 结果1 #四个空格,或者一个tab键,这个是告诉程序满足条件的话,运行这个结果 结果2 #如果条件是真(True)执行 ...
- python基础——1、python背景及特点——（YZ）
在之前的两种编程语言(C.Java)的学习之后,迎来新的一种编程语言的学习,但毕竟本着学一样一定要认真学的精神(期望是这样)首先,最最最少不了的是了解编程语言的背景.范围.特点.功能,等等.经过阅读资 ...
- Acrobat.CAcroPDDoc open 无法找到指定文件
pdfDoc = (Acrobat.CAcroPDDoc)Microsoft.VisualBasic.Interaction.CreateObject("AcroExch.PDDoc&quo ...
- Scrapy 代理IP
Scrapy 代理IP 一.Scarpy使用代理IP 1.在setting.py 配置 代理服务器IP 2.在middlermares.py 配置 downloadmiddlermare(下载中间件) ...
- 提交代码，SVN被锁定，提示：svn is already locked解决方案
今天遇到一个问题,svn 在提交代码的时候出现了svn is already locked,这是什么鬼,svn 没少用,但是这种情况,还是第一次遇到,于是,百度一下,查了一下,做一下个人分享. 遇到这 ...
- shell生成随机字符串
#!/bin/bash i=1while [ $i -le 10000 ]doa=`echo `< /dev/urandom tr -dc A-Za-z0-9 | head -c6``echo ...
- 16.1 解决SecureCRT的Home+End+Del不好用使用方法
有些时候 securecrt 的快捷键 与我们使用习惯不一致时,可以自己动手修改下映射文件. SecureCRT菜单 :工具→键映射编辑器,在弹出的键盘中点击“home”,会弹出一个窗口,在“发送字符 ...
- Linux基础入门-文件系统操作与磁盘管理
一.简单文件系统操作: df (-h) 查看磁盘容量: rootfs作为系统启动时内核载入内存之后,在挂载真正的磁盘之前的一个临时文件系统: /dev/sda2 对应主机硬盘的分区,后面的a表示第几块 ...