Vue.js小Demo--单选和复选功能实现

Vue官方文档上有单选按钮radio复选按钮checkbox的例子。
受此启发,写了这个小demo。

演示图:

demo.vue文件代码:

  <div>
    <div class="Select">
      <p class="Title">Single choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == One}"//条件为真时,:class多了个选中样式属性,即为选中状态.
        v-for="(item,index) in List"
        :key="index"
        @click="SelectedOne(index)"
      >{{item.message}}</span>
    </div>
    <div class="Select">
      <p class="Title">Multiple choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == Selected[index]}"
        v-for="(item,index) in List"
        :key="index"
        @click="SelectedTwo(index)"
      >{{item.message}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      One: 3,
      List: [{ message: "1st" }, { message: "2nd" }, { message: "3rd" }],
      Selected: [10, 10, 10, 10, 10]//初始复选按钮均为未选情况(此demo下v-for的index不可能等于10)
    };
  },
  methods: {
    SelectedOne(index) {
      this.One = index;
    },
    SelectedTwo(index) {
      this.Selected[index] == index
        ? this.Selected.splice(index, 1, 10)//替换数组第index项为10(在此demo下的情况为未选中)
        : this.Selected.splice(index, 1, index);//替换数组第index项为index(在此demo下的情况为选中)
    }
  }
};
</script>
<style?scoped>
/* 一些简单的样式 */
.Select {
  height: 82px;
  width: 359px;
  margin-left: 6px;
}
.Title {
  height: 17px;
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}
.Box {
  width: 88px;
  height: 35px;
  display: inline-block;
  margin-left: 10px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  font-family: "PingFang SC";
  color: rgba(102, 102, 102, 1);
  background: rgba(248, 248, 248, 1);
}
.Selected_active {
  background: rgba(224, 248, 249, 1);
  color: rgba(28, 178, 188, 1);
}
</style>

Splice函数的简单说明:splice(index,len,[item])
1、可以用来添加/删除/替换数组内某一个或者几个值
2、该方法会改变原始数组
index:数组开始下标
len: 替换/删除的长度
item:替换的值,删除操作的话 item为空

个人小小总结:功能挺简单的一个demo,算是加深自己对v-for的理解,以及v-for遍历下的:class绑定。

原文地址:https://www.cnblogs.com/JasperHua/p/12091967.html

时间: 2024-10-01 07:33:24

Vue.js小Demo--单选和复选功能实现的相关文章

关于通过jq /js 实现验证单选框 复选框是否都有被选中

今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问题来了 得出来的值 怎么做判断的 ,到现在也没弄明白. 最后果断 用jq来实现,刚开始也是怎么都不行  最后发现clss的值被我写错了 哎 剁手! 好了 下面上jq 实现 验证 单选框 复选框有没有同时被选中: <div class="tab-stpp" id="tab-s

Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                         Default.aspx 网页界面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.

pyqt单选,复选等例子学习

# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.QtGui import * from PyQt4.Qt import * from PyQt4.QtCore import * from check1 import Ui_Dialog from check2 import Ui_Dialog1 from check3 import Ui_Dialog2 import sys QTextCod

js如何判断一个checkbox复选框是否被选中

js如何判断一个checkbox复选框是否被选中:checkbox复选框是最为常用的表单元素之一,它的作用就是用来选中和取消选中,所以有时候就要判断一个复选框是否已经被选中,下面就通过代码实例简单介绍一下如何判断一个复选框是否被选中.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

CheckedListBoxControl 实现复选框的单选与多选功能

由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的复选框组合控件应该按照下面方法也可以实现该功能,可以试下(⊙o⊙)哦 代码来啦O(∩_∩)O哈哈~ 1 //首先触发SelectedIndexChanged事件,然后再触发ItemCheck事件 2 3 //存储选中的复选框的值 4 string strGXY=string.Empty; 5 pri

用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能,直接初體驗vue.js + firebase + webpack三種願望一次滿足XD! update: 20170923更新[用 Vue.js + Firebase 製作即時聊天功能(2) - storage](https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/) >DEMO< >原始碼-GitHub< 這幾天想

QComboBox实现复选功能

需求: 下拉列表有复选功能 不可编辑 显示所有选中项 关于QComboBox的复选功能有几种方案: QStandardItemModel + QStandardItem QListWidget + QListWidgetItem Model/View + QItemDelegate 当然,还有其它更好的方式,这里就不再过多介绍了,下面介绍一种比较简单的: QListWidget + QListWidgetItem + QCheckBox pListWidget = new QListWidget

QComboBox实现复选功能(三种方法:嵌套QListWidget, 设置QStandardItemModel, 设置Delegate)

今天介绍一下一个小东西 — 如何让QComboBox实现复选功能? 需求: 下拉列表有复选功能 不可编辑 显示所有选中项 关于QComboBox的复选功能有几种方案: QStandardItemModel + QStandardItem QListWidget + QListWidgetItem Model/View + QItemDelegate 当然,还有其它更好的方式,这里就不再过多介绍了,下面介绍一种比较简单的: QListWidget + QListWidgetItem + QChec

nz-table复选功能改造(整行可选)

如果你用到了nz-table组件,而且有勾选列表的需求时,就可以用该组件自带的nzShowCheckbox勾选属性,用法如下: <nz-table #rowSelectionTable nzShowPagination nzShowSizeChanger [nzData]="" (nzCurrentPageDataChange)="" > <thead> <tr> <th nzShowCheckbox [(nzChecked