首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现单选和多选功能

Posted in Javascript onAugust 11, 2017

本文实例为大家分享了vue实现单选和多选功能的具体代码，供大家参考，具体内容如下复制代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta>
 <title>Document</title>
 <script src="../vue.js"></script>
 <style>
  ul, li {
   list-style-type: none;
  }

  * {
   margin: 0;
   padding: 0;
  }

  .border-1px {
   position: relative;
  }

  .border-1px:after {
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   border-top: 1px solid rgba(7, 17, 27, .1);
   content: ' ';
  }

  @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
   .border-1px::after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
   }
  }

  @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
   .border-1px ::after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
   }
  }

  #example {
   margin: 20px;
  }

  h3 {
   font-size: 26px;
   margin-left: 20px;
   height: 60px;
  }

  .self-radio {
   display: none;
  }

  .self-radio + label {
   -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #aaa;
   border-radius: 50px;
   display: inline-block;
   position: relative;
   width: 30px;
   height: 30px;
   box-sizing: border-box;
  }

  .self-radio:checked + label {
   border: 1px #47d9bf solid;
  }

  .self-radio:checked + label:after {
   position: absolute;
   top: 9px;
   left: 9px;
   content: ' ';
   width: 10px;
   height: 10px;
   border-radius: 50px;
   background: #47d9bf;
   box-shadow: 0px 0px 5px 0px #47d9bf;
  }

  .check-area {
   display: inline-block;
   width: 400px;
   padding: 12px 20px;
   border: 1px solid #aaa;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
  }

  li {
   height: 60px;
  }

  li .self-radio + label {
   vertical-align: middle;
  }

  li span {
   margin-left: 20px;
   display: inline-block;
   line-height: 60px;
   font-size: 22px;
  }

  p {
   height: 60px;
   line-height: 60px;
   margin-left: 20px;
  }

  p span {
   color: #f00;
  }

  .btn {
   margin: 20px auto;
   width: 100%;
   text-align: center;
  }

  .btn button {
   width: 120px;
   height: 40px;
   line-height: 30px;
   font-size: 16px;
   color: #fff;
   background: #47d9bf;
   border: 1px #23d5b6 solid;
   border-radius: 6px;
   text-align: center;
   outline: none;
  }

  .btn button:hover {
   background: #23d5b6;
  }
 </style>
</head>

<body>
<div id="example">
 <h3>单选按钮</h3>
 <div class="check-area" v-show="items.length!=0">
  <ul>
   <li class="border-1px" v-for="(item,index) in items">
    <input class="self-radio" type="radio"
      :id="'radio-'+item.id"
      :data-id="'food-'+item.id" name="radio"
      :checked="index==0"
      :value="item.value"
      v-model="checkValue">
    <label :for="'radio-'+item.id" @click="setCheckValue(item)"></label>
    <span>{{item.value}}</span>
   </li>
  </ul>
  <p>您选择了：<span>{{checkValue}}</span></p>
  <div class="btn">
   <button @click="showCheck(checkId)">按钮</button>
   <span>{{checkId}}</span>
  </div>
 </div>
</div>
<script>
 var itemData = [{id: '20170811001', value: '香蕉'},
  {id: '20170811002', value: '苹果'},
  {
   id: '20170811003',
   value: '梨子'
  }, {id: '20170811004', value: '葡萄'}]
 //itemData = [];
 var vm = new Vue({
  el: '#example',
  data: {
   items: '',
   checkValue: '',
   checkId: ''
  },
  methods: {
   init: function () {

   },
   initData: function () {
    var self = this;
    self.items = itemData;
    if (itemData.length != 0) {
     self.checkValue = self.items[0].value;
     self.checkId = 'food-' + self.items[0].id
    }
   },
   setCheckValue: function (item) {
    this.checkId = 'food-' + item.id;
   }
   ,
   showCheck: function () {
    console.log(this.checkId)
   }
  },
  mounted: function () {
   this.initData();
  }
 })

</script>
</body>

</html>

vue实现单选和多选功能

vue实现多选功能

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta>
 <title>Document</title>
 <script src="../vue.js"></script>
 <style>
 ul, li {
  list-style-type: none;
 }

 * {
  margin: 0;
  padding: 0;
 }

 .border-1px {
  position: relative;
 }

 .border-1px:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(7, 17, 27, .1);
  content: ' ';
 }

 @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px::after {
  -webkit-transform: scaleY(0.7);
  transform: scaleY(0.7);
  }
 }

 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px ::after {
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  }
 }

 #example {
  margin: 20px;
 }

 h3 {
  font-size: 26px;
  margin-left: 20px;
  height: 60px;
 }

 .self-checkbox {
  display: none;
 }

 .self-checkbox + label {
  margin-top: 16px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #aaa;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  vertical-align: top;
 }

 .self-checkbox:checked + label {
  border: 2px #47d9bf solid;
 }

 .self-checkbox:checked + label:after {
  display: inline-block;
  text-align: center;
  content: '√';
  width: 100%;
  height: 30px;
  line-height: 26px;
  color: #47d9bf;
  font-size: 18px;
  text-shadow: 0px 0px 5px #47d9bf;
 }

 .check-area {
  display: inline-block;
  width: 400px;
  padding: 12px 20px;
  border: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
 }

 li {
  height: 60px;
 }

 li .self-radio + label {
  vertical-align: middle;
 }

 li span {
  margin-left: 20px;
  display: inline-block;
  line-height: 60px;
  font-size: 22px;
 }

 p {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
 }

 p span {
  color: #f00;
 }

 .btn {
  margin: 20px auto;
  width: 100%;
  text-align: center;
 }

 .btn button {
  width: 120px;
  height: 40px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  background: #47d9bf;
  border: 1px #23d5b6 solid;
  border-radius: 6px;
  text-align: center;
  outline: none;
 }

 .btn button:hover {
  background: #23d5b6;
 }
 </style>
</head>

<body>
<div id="example">
 <h3>多选按钮</h3>
 <div class="check-area" v-show="items.length!=0">
 <ul>
  <li class="border-1px" v-for="(item,index) in items">
  <input class="self-checkbox" type="checkbox"
   :id="'checkbox-'+item.id"
   :data-id="'food-'+item.id" name="radio"
   :value="item.value"
   v-model="checkValues"
   @click="setCheckValue($event,item)">
  <label :for="'checkbox-'+item.id"></label>
  <span>{{item.value}}</span>
  </li>
 </ul>
 <p>您选择了：<span v-show="checkValues.length">{{filterCheckValues}}</span></p>
 <div class="btn">
  <button @click="showCheck(checkIds)">按钮</button>
  <span v-show="checkIds.length">{{checkIds}}</span>
 </div>
 </div>
</div>
<script>
 var itemData = [{id: '20170811001', value: '香蕉'},
 {id: '20170811002', value: '苹果'},
 {
  id: '20170811003',
  value: '梨子'
 }, {id: '20170811004', value: '葡萄'}]
 //itemData = [];
 var vm = new Vue({
 el: '#example',
 data: {
  items: '',
  checkValues: [],
  checkIds: []
 },
 computed: {
  filterCheckValues: function () {
  var value = this.checkValues;
  var reValue = '';
  for (var i = 0; i < value.length; i++) {
   reValue += value[i] + '、'
  }
  reValue = reValue.substring(0, reValue.length - 1)
  return reValue;
  }
 },
 methods: {
  initData: function () {
  var self = this;
  self.items = itemData;
  if (itemData.length != 0) {
//   self.checkValues[0] = self.items[0].value;
//   self.checkIds[0] = 'food-' + self.items[0].id;
  }
  },
  setCheckValue: function (ev, item) {
  var id = 'food-' + item.id;
  if (ev.target.checked) {
   this.checkIds.push(id);
  } else if (this.checkIds.indexOf(id) > -1) {
   this.checkIds.remove(id);
  }
  }
  ,
  showCheck: function () {
  console.log(this.checkIds)
  }
 },
 filter: {},
 mounted: function () {
  this.initData();
 }
 })
 Array.prototype.remove = function (val) {
 var index = this.indexOf(val);
 if (index > -1) {
  this.splice(index, 1);
 }
 };
</script>
</body>

</html>

vue实现单选和多选功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue实现单选和多选功能

- Author -

Newbie_小白

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
委托书(259) 任命书(51) 担保书(46) 公证书(45) 检举信(8) 竞聘书(31) 意向书(73) 标语(336) 协议书(568) 说明书(38)
You might like
PHP中的正规表达式（一）
2006/10/09 PHP
php下获取http状态的实现代码
2014/05/09 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
弹出层之1：JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python如何制作英文字典
2019/06/25 Python
详解pandas数据合并与重塑（pd.concat篇）
2019/07/09 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
文员岗位职责
2013/11/09 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
开业庆典主持词
2014/03/21 职场文书
个人求职信范文
2014/05/24 职场文书
民事代理词范文
2015/05/25 职场文书