<!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"] 的用法的更多相关文章

  1. 036——VUE中表单控件处理之动态绑定文章的属性的处理方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 037——VUE中表单控件处理之表单修饰符：lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 032——VUE中表单控件处理之复选框的处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中表单的动态绑定

    有一个表单: <el-form :model="configForm"> </el-form> 如果configForm初始化为{},此对象是动态变化的,如 ...

  8. Vue中表单校验

    1.安装校验插件vee-validate npm install vee-validate --save 2.在main.js中引用插件 // 表单校验 import VeeValidate, { V ...

  9. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. 虚拟主机TOMCAT配置

    在tomcat中添加虚拟主机: 编辑"tomcat\conf\server.xml",在"<Engine></Engine>"元素中新加 ...

  2. 如何用Java实现反转排序

    摘要:反转排序是将原先已经排序好了的重新排序,是原来的数组元素的顺序反转过来.假设原来的数组顺序是{6,5,4,3,2,1},反转之后的顺序就是{1,2,3,4,5,6}.这个排序的算法不是很难,代码 ...

  3. MySql系列之表的数据类型

    存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件 ...

  4. [洛谷P2245]星际导航

    题目大意:有一张n点m边的带权无向图,和一些问题,每次询问两个点之间的路径的最大边权最小是多少. 解题思路:同NOIP2013货车运输,只是数据增大,大变成小,小变成大了而已.所以具体思路见货车运输. ...

  5. Linux学习总结（9）——Linux 新手必知必会的 10 条 Linux 基本命令

    Linux 对我们的生活产生了巨大的冲击.至少你的安卓手机使用的就是 Linux 核心.尽管如此,在第一次开始使用 Linux 时你还是会感到难以下手.因为在 Linux 中,通常需要使用终端命令来取 ...

  6. UML 绘图关系

    1 继承         子类继承父类   2 实现         实现类实现接口 3 依赖 (偶然.临时.比较弱关联)     类 A 使用了类 B,如果类 B 产生变化将会影响类A       ...

  7. hdu 1575 矩阵连乘2

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  8. webpack02

    consumer-index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. UVALive - 6266 Admiral 费用流

    UVALive - 6266 Admiral 题意:找两条完全不相交不重复的路使得权值和最小. 思路:比赛的时候时间都卡在D题了,没有仔细的想这题,其实还是很简单的,将每个点拆开,连一条容量为1,费用 ...

  10. Weka中数据挖掘与机器学习系列之Exploer界面（七）

    不多说,直接上干货! Weka的Explorer(探索者)界面,是Weka的主要图形化用户界面,其全部功能都可通过菜单选择或表单填写进行访问.本博客将详细介绍Weka探索者界面的图形化用户界面.预处理 ...