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>

时间： 2024-10-28 19:55:28

vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法的相关文章

关于Vue中表单的使用方法

原文地址:https://www.cnblogs.com/is-meeeee/p/10993030.html

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

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

[转载说明:原文排版不是很好,为方便阅读,改进了排版] django的表单设计真的很棒,涉及非常多的功能,今天介绍django较为主流的几种表单使用方法.注:本文中表单与form通用.模型与model通用.表单.模型的基础知识可以通过django book学习.传送门:http://djangobook.py3k.cn/2.0/ 0.用例我在本篇博客中,将使用同一个用例,前后会以不同的方式表示它,以此介绍不同的表单实现方法.用例很简单,是一个叫做Server的类(大多数时候也可以理解为数据库中的

HTML5中表单验证的8种方法(转)

在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误. 但是真正的表单验证是什么? 是一种优化. 之所以说表单验证是一种优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的.另一方面,设计表单验证是为了让Web应用更快地抛出错误.换句话说,最好利用浏览器内置的处理机制来告知用户网页内包含无效的表单控件值.过去

60秒验证码倒计时js代码 js样式代码方块上下左右随机移动（定时器） js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

vue 表单提交

在vue中,有一个$el 属性. 该属性在created 的阶段还是不可用的,直到 mounted 之后,我们才能获取到 $el 属性. $el是vue实例中 el 属性标识的dom元素. ------------------------------------ vue表单提交,有时候需要提交文件数据,这时候需要用到 formDate,代码如下 1 let formData = new FormData($(this.$el).find(".import-form")[0]); //

VUE 表单元素双向绑定总结

checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inputdata"/> new Vue({ el:"

vue 表单校验（二）

vue 表单校验(二) vue element-ui表单校验由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中表单校验分类前后端校验前端校验后端校验这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的前端检验数据录入时校验数据回显时校验动态创建时校验数据是否必填时校验接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

struts2.3.16中表单重复提交出现空指针异常

异常代码形式: 严重: Exception occurred during processing request: nulljava.lang.NullPointerException at com.opensymphony.xwork2.util.LocalizedTextUtil.findText(LocalizedTextUtil.java:630) at com.opensymphony.xwork2.util.LocalizedTextUtil.findText(Local