Vue.js checkbox 练习
<div id="app">
<input type="checkbox" v-model="sex" value="" />足球
<input type="checkbox" v-model="sex" value="" />篮球
<input type="checkbox" v-model="sex" value="" />乒乓球
<br />
{{sex}}
<br />
<button v-on:click="clickall(true)">全选</button>
<button v-on:click="clickall(false)">取消全选</button> </div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
sex:[]
}
,
methods: {
clickall: function (flag) {
if (flag) {
_this = this;
this.sex = [];
$.each($(":checkbox"), function (i, v) {
_this.sex.push(v.value);
});
} else {
this.sex = [];
}
}
}
});
</script>
用自定义指令实现全选和取消全选
<div id="app">
<ul>
<li v-for="item in list">
<input type="checkbox" v-sel="item.checked" /> {{item.name}}
</li>
</ul>
<br />
{{list}}
<br />
<button v-on:click="clickall(true)">全选</button>
<button v-on:click="clickall(false)">取消全选</button> </div>
<script type="text/javascript">
Vue.directive("sel", function (el, v) {
if (v.value) {
$(el).attr("checked", "checked");
} else {
$(el).removeAttr("checked");
}
});
var vm = new Vue({
el: "#app",
data: {
list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
},
mounted:function() {
}
,
methods: {
clickall: function (flag) {
if (flag) {
this.list.forEach(function (v, i) {
v.checked = true;
});
} else {
this.list.forEach(function (v, i) {
v.checked = false;
});
}
}
}
});
</script>
Vue.js checkbox 练习的更多相关文章
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- 关于vue.js中表单控件绑定练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- Vue.js常见问题
1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js移动端app实战3:从一个购物车入门vuex
什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...
随机推荐
- linux内存碎片的概念
一般在内核术语中的“碎片”都是基于物理内存而言的,我没有太看懂你得出碎片是针对地址空间这个结论的逻辑.但我认为,既然你知道了malloc是用户空间调用的,那么你所谓的碎片也是从用户空间的视角而言的,但 ...
- 学号 20155311 2016-2017-2 《Java程序设计》第1周学习总结
学号 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 JAVA三大平台**:Java SE.Java EE .Java ME. Java SE四个组成部分:J ...
- 20145226夏艺华 《Java程序设计》预备作业3
安装虚拟机 上学期开学的时候就安装了Linux虚拟机,由于我的是Mac OS,所以和windows下的安装有所不同. 我使用的是VirtualBoxVM虚拟机,稳定性还不错,需要的同学可以从https ...
- [BZOJ2961]共点圆-[凸包+cdq分治]
Description 传送门 Solution 考虑对于每一个点: 设圆的坐标为(x,y),点的坐标为(x0,y0).依题意得,当一个点在圆里,需要满足(x-x0)2+(y-y0)2<=x2+ ...
- 打豪车应用:uber详细攻略(附100元优步uber优惠码、uber优惠券、优步优惠码、优步优惠券)
在嘀嘀打车和快的打车交战热闹的时候,美国的打车应用uber进入中国.与在美国以个人司机注册做 Uber 司机为主的模式不同,Uber 在中国采用与租车公司合作.由租车公司提供车辆和司机的模式,同时中文 ...
- 【转载】C/C++杂记:深入虚表结构
原文:C/C++杂记:深入虚表结构 1. 虚表与“虚函数表” 在“C/C++杂记:虚函数的实现的基本原理”一文中曾提到“虚函数表”的概念,只是为了便于理解,事实是:虚函数表并不真的独立存在,它只是虚表 ...
- PHP Redis 缓存数据
// 注:只是在此做下记录,有兴趣的可以参考,不做实际教程文档// 配置文件define('CONFIG', [ 'redis-server' => '127.0.0.1', 'redis-po ...
- xshell连接虚拟机linux系统失败问题
问题:在xshell新建对话弹出的对话框中输入ip地址后,确定并没有弹出输入用户名和密码对话框 直接显示连接失败 Could not connect to ): Connection failed. ...
- Jmeter——分布式并发
1.修改配置文档 在Jmeter文件夹bin目录下找到jmeter.properties: 在该文件内找到 remote_hosts=127.0.0.1,将其修改为自己的远程压力机,这里作为练习我就用 ...
- ython进阶06 循环对象
这一讲的主要目的是为了大家在读Python程序的时候对循环对象有一个基本概念. 循环对象的并不是随着Python的诞生就存在的,但它的发展迅速,特别是Python 3x的时代,循环对象正在成为循环的标 ...