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 ...
随机推荐
- vue.js技巧小计
//删除数组索引方法01 del (index) { this.arr.splice(index ,1); } //删除数组索引方法01 del (index) { this.$delete(this ...
- windows, fast-rcnn CPU版本的安装配置
一:安装准备 1:caffe的安装配置,本人用的是happynear大神的caffe版本,具体链接https://github.com/happynear/caffe-windows,编译时需要用到p ...
- Mojo C++ Platform API
Mojo C++ Platform API This document is a subset of the Mojo documentation. Contents Overview Platfor ...
- 我的PHP学习之路
由于工作中,做微信小程序需要我自己写一些后台代码.并且公司后台用的是php.所以我决定在周末和下班后抽空学习php.一开始,我想找一些入门视频来学,然后发现好像效率不是很好.不如看书来得痛快.(主要是 ...
- ArcGIS api for javascript——显示地图属性
描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...
- 基于ArcGIS Flex API实现动态标绘（1.2）
动态标绘API 1.2,相较前一版本号(点击进入),该版本号新增对基本标绘符号的支持,包含: 单点.多点.折线.手绘线.多边形.手绘多边形.矩形,并提供对应的编辑功能. 例如以下图所看到的,对多点的编 ...
- Lesson 2 Building your first web page: Part 3
Time to build your first HTML page by hand I could go on with more theory and send half of you to sl ...
- Spring MVC 入门
1.准备开发环境和运行环境: ☆开发工具:eclipse ☆运行环境:tomcat6.0.20 ☆工程:动态web工程(springmvc-chapter2) ☆spring框架下载: spring- ...
- [ Java ][ Eclipse ] 停止讓 Eclipse 跳出 Password Required
stackoverflow 上,問題的解決方式: http://stackoverflow.com/questions/4713890/how-to-disable-programmatically- ...
- 发现javax.xml.parsers.SAXParser有bug
javax.xml.parsers.SAXParser有bug, 我发现的地方在characters(char[] ch, int start, int length) length偶尔会变小,导致截 ...