<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的更多相关文章

  1. ASP.NET Core + Vue.js 开发

    1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...

  2. Vue ElementUI 按需引入

    一.element UI组件的单独使用(第一种方法): 1.cnpm install babel-plugin-component -D         2.找到.babelrc 配置文件       ...

  3. Vue.JS React 精彩文章汇总

    JavaScript深入系列  [干货] JavaScript数组所有API全解密  [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...

  4. vue+elementui按需引入

    转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...

  5. vue 异步请求

    摘自 ECMAScript 6 简介: 大家习惯将 ECMAScript 6.0 简称为 ES6,它是 Javascript 语言的下一代标准,它的目标,是使得 Javascript 语言可以用来编写 ...

  6. Vue 入门之 Vuex 实战

    Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...

  7. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  8. vue使用element-ui实现按需引入

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.ele ...

  9. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

随机推荐

  1. Privoxy代理的使用

    目录 1. Privoxy介绍 1.1 安装 1.2 配置 1.3 使用 1.4 其他配置 1.5 测试链接及查看配置 2. 相关信息 https://www.privoxy.org/ http:// ...

  2. Redis事务和实现秒杀功能的实现

    今天带着学生学习了Redis的事务功能,Redis的事务与传统的关系型数据库(如MySQL)有所不同,Redis的事务不能回滚. Redis中使用multi.exec.discard.watch.un ...

  3. 几何概型 uva11722

    #include<bits/stdc++.h> using namespace std; int t1,t2,s1,s2,w; int get(int b) { ; int d=s2-s1 ...

  4. Pyhon 逻辑运算符

  5. OTB数据库上各tracker评测结果

    后面两张success plot分别是按照threshold和auc排序 各tracker说明: Year2015: [CF2] 实验结果比论文中的结果好,原因是我运行的是作者后期又更新过的代码,作者 ...

  6. HanLP vs LTP 分词功能测试

    文章摘自github,本次测试选用 HanLP 1.6.0 , LTP 3.4.0 测试思路 使用同一份语料训练两个分词库,同一份测试数据测试两个分词库的性能. 语料库选取1998年01月的人民日报语 ...

  7. C#版微信公众号支付|微信H5支付|微信扫码支付问题汇总及解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存.代码在文章结尾处,有需要的 ...

  8. php7 pdo抽象类操作数据库

    查询 <?php try { $dbconnect = new PDO('mysql:host=localhost;dbname=pdodatabase','root','753951'); } ...

  9. Optaplanner规划引擎的工作原理及简单示例(2)

    开篇 在前面一篇关于规划引擎Optapalnner的文章里(Optaplanner规划引擎的工作原理及简单示例(1)),老农介绍了应用Optaplanner过程中需要掌握的一些基本概念,这些概念有且于 ...

  10. 工控随笔_17_西门子_WinCC的VBS脚本_06_过程和函数

    和其他语言一样,vbs提供了过程和函数机制,通过函数和过程可以优化代码结构和实现代码复用, 减少代码的编写量. 一.代码 具体不再多说,看实例代码. ' vbs的函数和过程 '1.过程式编程是一大编程 ...