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 ...
随机推荐
- PostgreSQL Replication之第七章 理解Linux高可用（2）
7.2 衡量可用性 可用性是提供商试图保证一定的可用性级别和客户可以期望的可用性或更多.在某些情况下(取决于服务合同) 收取罚款或减少申购费用是意外停机的原因. 可用性的质量使用百分数来衡量:例如,9 ...
- numa 和 mysql
cpu numa结构反应的内存访问速度问题: 在多核cpu的时代引入了cpu的numa(非一致内存访问结构): NUMA引入了node的概念,每个物理CPU都被视作一个node,而每个node都有一个 ...
- html局部页面打印
1.局部打印函数. function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页 ...
- pycaffe 可视化常用
net.params['layername'].[0]/[1] caffe的一个程序跑完之后会在snapshot所指定的目录下产生一个后缀名为caffemode的文件,这里存放的就是我们在训练网络的时 ...
- POJ-2785 Values whose Sum is 0 Hash表
题目链接:https://cn.vjudge.net/problem/POJ-2785 题意 给出四组数,每组有n个数 现从每组数中取一个数作为a,b,c,d 问有几组这样的a+b+c+d=0 思路 ...
- [洛谷P3927]SAC E#1 - 一道中档题 Factorial
题目大意:求$n!$在$k(k>1)$进制下末尾0的个数. 解题思路:一个数在十进制转k进制时,我们用短除法来做.容易发现,如果连续整除p个k,则末尾有p个0. 于是问题转化为$n!$能连续整除 ...
- Centos7不修改默认交换分区下添加交换分区
交换分区介绍 Linux系统中的交换分区是当物理内存(RAM)被充满时,作为物理内存的缓存来使用. 当系统需要更多的内存资源而物理内存已经充满,内存中不活跃的页就会被移动到交换分区上. 交换分区位于硬 ...
- Generational GC (Part one )
目录 什么是分代垃圾回收 对象对的年龄 新生代对象和老年对象 Ungar的分带垃圾回收 堆的结构 记录集 写入屏障 对象的结构 分配 新生代GC 幸存空间沾满了怎么办? 老年代GC 优缺点 吞吐量得到 ...
- 新一代企业即时通信系统 -- 傲瑞通（OrayTalk）
傲瑞通(OrayTalk)是我们为企业专门打造的新一代企业即时通讯平台,功能强大丰富.像组织结构.文字/语音/视频会话.文件传送.远程协助.消息记录等功能都有,而且留有接口可与企业遗留系统进行集成. ...
- 思科E3200 路由器 DD-WRT 设置花生壳和3322.org动态域名(DDNS)
花生壳设置(已測试) ddns.oray.com:80 username aaaa password bbbb 主机名 abc.gicp.net URL /ph/update?ho ...