VUE 全选
2024-08-30 09:18:28
<div id="vue_det">
<p>全选:</p>
<input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/>
<label for="checkbox">
{{checked}}
</label> <p>多个复选框</p>
<input type="checkbox" id="r1" value="r1" v-model="checkedNames"/>
<label for="r1">r1</label>
<input type="checkbox" id="r2" value="r2" v-model="checkedNames"/>
<label for="r2">r2</label>
<input type="checkbox" id="r3" value="r3" v-model="checkedNames"/>
<label for="r3">r3</label>
<input type="checkbox" id="r4" value="r4" v-model="checkedNames"/>
<label for="r4">r4</label>
<input type="checkbox" id="r5" value="r5" v-model="checkedNames"/>
<label for="r5">r5</label> <span>选择的值为:{{checkedNames}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue_det',
data:{
checked:false,
checkedNames:[],
checkedArr:['r1','r2','r3','r4','r5']
},
methods:{
changAllChecked:function(){
if(this.checked){
this.checkedNames = this.checkedArr
}else{
this.checkedNames=[]
}
}
}
});
</script>
最新文章
- erlang 分布式数据库Mnesia 实现及应用
- java 克隆
- UE4 自定义物理表面类型(Surface Type)
- PHP 文件上传类
- ASP.NET MVC的约定
- MVC的发展
- 返回当前页面title、url等操作
- Window7下手动编译最新版的PCL库
- 【转载】laravel的MVC
- NuGet安装及简单使用
- 【CSS学习笔记】整齐的表格
- jQuery Ajax 使用 ($.ajax、$.post、$.get)
- [HDU5969] 最大的位或
- CentOS6.5 上crontab每天自动备份mysql数据库
- MySQL的并发控制与加锁分析
- 枚举之后define
- #ing#我的日常知识管理160421
- Eclips 快捷键设置
- html学习笔记五
- js 中的[] {}是什么意思
热门文章
- 在类的头文件里尽量少引入其它头文件 &;lt;&;lt;Effective Objective-C&;gt;&;gt;
- bzoj3109【CQOI2013】新数独
- Supporting IPv6-only Networks
- scala wordcount kmeans
- mac系统下显示隐藏文件
- BZOJ_4591_[Shoi2015]超能粒子炮&#183;改_Lucas定理
- bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+位运算
- hdu3092
- hdu3555(数位DP dfs/递推)
- EF通过反射追踪修改记录.适合记录变更系统