<!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. iOS: 零误差或极小误差的定时执行或延迟执行?

    问题如下: 节奏类游戏需要执行很多的跟音乐节拍相关的操作,并且为了保证节奏感,需要让操作跟节拍的关系十分紧密.对两者间隔要求不能超过0.02秒或更低. 目前使用了 GCD 中的 asyncAfter( ...

  2. [ SQLServer ] 數字類型的欄位細節 - 轉載

    [MSSQL] 欄位開立(2) - decimal, numeric, float, real, money 的抉擇 https://dotblogs.com.tw/henryli/2015/06/1 ...

  3. PostgreSQL+pgpooll+Keepalived双机HA方案

    PostgreSQL+pgpooll+Keepalived双机HA方案 (注:本文档中的所有操作在没有说明的情况下都应该使用postgres用户进行操作,postgres用户没有权限的操作方可采用ro ...

  4. Future模式 总结

    future模式解决异步代码的组织(混入)问题: 类似的解决方案: 1.网络响应的block: 2.SDImageview的自组织.代理模式: 3.顶层响应机制的协议机制:

  5. RSA不对称加密

    package sinRsa; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io ...

  6. Java Web MVC 一个实例的手动实现

    平台: tomcat7.0    Servlet3.0    Windows命令行编译 实现的功能: 在网页上可以进行对Product类的三个属性的输入,点击保存之后跳转到另一个显示输入内容的界面 文 ...

  7. linux Cenos-7.0下安装jdk搭建环境变量

    搭建linux系统的java环境本人目前所知有两种方式: 第一种是从oracle官网下载linux系统的jdk版本: 第二种是使用yum命令的方式下载安装,咱们今天讲的是第一种方式. 一.工具准备: ...

  8. python之禅---对象与元类

    众所周知,python是一门面向对象的编程语言,python中一切皆对象,那么我们先探讨一下什么是对象. 一.对象 在生活中一个事物就是一个对象,比如:一只猫就是一个对象,猫的体型.猫毛的颜色等是它的 ...

  9. 洛谷P1006 传纸条 (棋盘dp)

    好气,在洛谷上交就过了,在caioj上交就只有40分 之前在51nod做过这道题了. https://blog.csdn.net/qq_34416123/article/details/8180902 ...

  10. Xwiki平台Windows搭建(Tomcat7 + XWiki6.2 + MySQL5.5)

    背景介绍 国内xwiki安装使用资料较少,根据自己使用xwiki经验,总结出来,供参考,同时希望感兴趣的朋友能够一起讨论,XWiki是一个强大的Java开源的Wiki引擎. 它支持一些受欢迎的特性如: ...