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高可用（5）
7.5 高可用性是所有冗余 让我们从一个不同的角度看一下前面的混合超市的例子.为了处理大量顾客无需长排队,无需关闭超市,混合超市雇用更多的出纳员以及安装许多(甚至更多)的收银机. 这样,如果一个收银机 ...
- jquery on event
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- MNIST手写数字数据集
下载python源代码之后,使用: import input_data mnist = input_data.read_data_sets('MNIST_data/',one_hot=True) 下载 ...
- mysql优化篇之表分区
当表的数据量达到一定数量时(如单个.myd文件都达到10G,myd 是mysql的数据文件),这时候读取起来必然效率很低. 1.从业务角度可以解决(分表) ...
- gcd步数
题目描述 一个有趣的函数F(a,b),表示对于数对(a,b)调用辗转相除法的步数为多少 例如 (24,40)....0 (16,24).....1 (8,16).....2 (0,8)....3,即f ...
- memset函数的用法
重点需要注意一个细节:memset是以byte来填充的,也就是一个字节(8bit)一个单位来填充. 因此:如果int array[10]: memset(array, 1, 10):然后再把array ...
- 【Fiddler】使用fiddler抓取指定浏览器的包
参考资料:http://blog.csdn.net/sufubo/article/details/49331705 使用fiddler抓取不到浏览器的包时常用的解决办法: 1.必须先打开Fiddler ...
- 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置，并确认配置正确
摘要 上一篇,一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间 ,讲述了项目优化的整体背景,重点讲述了统一显示了Web项目SQL语句的执行时间. 本篇,将重点介绍提高 ...
- android数据储存之存储方式
能够将数据储存在内置或可移动存储,数据库,网络.sharedpreference. android能够使用Content provider来使你的私有数据暴漏给其它应用程序. 一.sharedpref ...
- 剑指offer—java版本实现
终于完成了全部!所有的心累这时候都觉得很值得啊!爽! https://github.com/xurui1995/Sword-pointing-to-offer