<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. install MariaDB 10.2 on Ubuntu 18

    Here are the commands to run to install MariaDB 10.2 from the MariaDB repository on your Ubuntu syst ...

  2. 访问Mat某一个像素值

    mat.at<uchar>(row, col): 如果想要用cout打印出来,前面要加上(int),否则打印出来的是空字符:

  3. H3C_IRF_BFD配置

    IRF典型配置举例(BFD MAD检测方式)1. 组网需求 由于网络规模迅速扩大,当前中心交换机(Device A)转发能力已经不能满足需求,现需要在保护现有投资的基础上将网络转发能力提高一倍,并要求 ...

  4. 《DSP using MATLAB》Problem 7.25

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  5. [Python学习笔记] 数字类型及操作

    数字类型 整数类型 十进制:1110,-123 二进制:以0B或0b开头 0b110,-0B101 八进制:以0O或0o开头 0o123,-0O567 十六进制:以0X或0x开头 0x555,-0X8 ...

  6. react安装

    1. npm install -g create-react-app 2. create-react-app my-app 3. cd my-app npm start 4.浏览器打开  http:/ ...

  7. GIT & VersionControl

    一.Git Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. [1]  Git 是 Linus Torvalds 为了帮助管理 Linux ...

  8. skimage

    它是由python语言编写的,   子模块名称 主要实现功能 io 读取.保存和显示图片或视频 data 提供一些测试图片和样本数据 color 颜色空间变换 filters 图像增强.边缘检测.排序 ...

  9. 矩形覆盖(JAVA)

    矩形覆盖 题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 思路:最初看到这题,只能通过画图归纳来寻找规律. ...

  10. zabbix4.0离线快速编译安装(编译安装方法)

    本博客已整理更新至第二版.更新与2019.4.17 其实这个主要是想试一下离线编译安装的具体步骤,记得要配置好本地yum云,因为我们需要使用yum,yum能帮我们自动解决很多依赖问题.发现最主要的问题 ...