vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.main{
width:300px;
height:300px;
border:1px solid #ccc;
}
.s1{
border:1px solid #0f0;
}
.s2{
border:1px solid #d00;
}
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<script src="http://cdn.bootcss.com/vue/1.0.24-csp/vue.min.js"></script>
<div class="app" v-cloak>
<ul>
<li>
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" >
<span>{{ toggle }}</span>
<div class="main" :class="[toggle === 'a' ? classA : classB]" :style="{color:activeColor}"> dd</div>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:".app",
data:{
classA:'s1',
classB:'s2',
a:'a',
b:'b',
toggle:'',
activeColor: '#f0f',
},
methods:{
},
ready:function(){
}
})
</script>
</body>
</html>
vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法的更多相关文章
- 036——VUE中表单控件处理之动态绑定文章的属性的处理方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 032——VUE中表单控件处理之复选框的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中表单的动态绑定
有一个表单: <el-form :model="configForm"> </el-form> 如果configForm初始化为{},此对象是动态变化的,如 ...
- Vue中表单校验
1.安装校验插件vee-validate npm install vee-validate --save 2.在main.js中引用插件 // 表单校验 import VeeValidate, { V ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- 集合HashSet的使用
集合中的HashSet底层是通过Hash表实现,HashSet的特点是元素唯一,但用到Hash表就跟hashCode()有了密不可分的联系,所以HashSet的唯一性是通过hashCode()方法来保 ...
- PostgreSQL Replication之第八章 与pgbouncer一起工作（2）
8.2 安装pgbouncer 在我们深入细节之前,我们将看看如何安装pgbouncer.正如PostgreSQL一样,您可以采取两种途径.您可以安装二进制包或者直接从源代码编译.在我们的例子中,我们 ...
- CF 986A Fair（多源BFS）
题目描述 一些公司将在Byteland举办商品交易会(or博览会?).在Byteland有 nnn 个城市,城市间有 mmm 条双向道路.当然,城镇之间两两连通. Byteland生产的货物有 kkk ...
- 【APP自动化】Appium Android 元素定位方法 原生+H5
参考资料: http://blog.csdn.net/vivian_ljx/article/details/54410024
- 第三讲 $\mathbb{R}^4$上平凡主丛的联络、曲率与Yang-Mills泛函
一. $\mathbb{R}^4$或$\mathbb{R}^n$上平凡主丛的联络与曲率$\newcommand{\R}{\mathbb{R}}$ 回忆切丛$T\R^n\cong \R^n\times\ ...
- 【Codeforces Round #422 (Div. 2) D】My pretty girl Noora
[题目链接]:http://codeforces.com/contest/822/problem/D [题意] 有n个人参加选美比赛; 要求把这n个人分成若干个相同大小的组; 每个组内的人数是相同的; ...
- eclipse maven install 时控制台乱码问题解决
pom.xml文件中加入: <properties> <argLine>-Dfile.encoding=UTF-8</argLine> <project.bu ...
- ArcGIS api for javascript——合并两个ArcGIS Online服务
描述 这个示例创建一个地图并ArcGIS Online增加连个图层到地图.ArcGIS Online是由ESRI体提供的一组切片地图服务,可以用来通过高质量的地图和数据增强应用.这个示例增加影像和运输 ...
- C++调用Lua的性能測试
游戏服务器经典的架构就是C++和Lua的结合,C++开发主体框架.Lua实现一些复杂的逻辑.我们都知道Lua是一种很快的语言.可是究竟有多块.我们測试下看看. C++调用Lua的性能測试.发现不正确的 ...
- 《R实战》读书笔记二
第一章 R简单介绍 本章概要 1安装R 2理解R语言 3执行R程序 本章所介绍的内容概括例如以下. 一个典型的数据分析步骤如图1所看到的. 图1:典型数据分析步骤 简而言之,现今的数据分析要求我们从多 ...