<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 练习的更多相关文章

  1. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  4. 关于vue.js中表单控件绑定练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  5. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  6. Vue.js常见问题

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  7. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  8. Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  9. vue.js移动端app实战3:从一个购物车入门vuex

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...

随机推荐

  1. 20155321 实验四 Android程序设计

    20155321 实验四 Android程序设计 安装Android studio成功 任务一:Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)( ...

  2. 20155330 实验二 Java面向对象程序设计

    20155330 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...

  3. 20145226夏艺华 网络对抗技术 EXP7 网络欺诈技术防范

    20145226夏艺华 网络对抗技术 EXP7 网络欺诈技术防范 实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. · 简单应用SET工具建立冒名网站 · ett ...

  4. SaltStack入门篇(三)之数据系统Grains、Pillar

    1.什么是Grains? Grains是saltstack的组件,用于收集salt-minion在启动时候的信息,又称为静态信息.可以理解为Grains记录着每台Minion的一些常用属性,比如CPU ...

  5. Python:静态方法、类方法、实例方法

    1. 静态方法@staticmethod (1)无需自身对象的self参数和自身类的cls参数,可直接通过 类名.方法名 进行调用 (2)Python中并不是真正意义上的静态方法,因为类定义本身就是个 ...

  6. Q&As:1.cocos2d-html5如何获得鼠标划过事件

    不喜欢按部就班学东西,感觉各种框架各种技术就应该是拿到手用的,这应该是导致我现在学了这么多却没一样精通的缘故吧. 发现自己喜欢在QQ群回答一些菜鸟的问题,就算自己不清楚也会乐意看代码帮助解决╮(╯_╰ ...

  7. 三、Django之请求与响应-Part 1

    一.新建项目 进入你指定的项目保存目录,然后运行下面的命令: $ django-admin startproject mysite 这将在目录下生成一个mysite目录,也就是你的这个Django项目 ...

  8. 爬虫2.4-scrapy框架-图片分类下载

    目录 scrapy框架-图片下载 1 传统下载方法: 2 scrapy框架的下载方法 3 分类下载完整代码 scrapy框架-图片下载 python小知识: map函数:将一个可迭代对象的每个值,依次 ...

  9. OpenLDAP配置TLS加密传输

    原文发表于cu:2016-07-04 参考文档: 基于OpenSSL自建CA与颁发SSL证书:http://seanlook.com/2015/01/18/openssl-self-sign-ca/ ...

  10. Just a Hook:线段树+区间修改

    E - Just a Hook In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most ...