精华内容
下载资源
问答
  • vue单选按钮,选中改变其当前按钮颜色 html: <span v-for="(item,index) in state" :key="index" @click="leftChange(index)" :class="{ liBackground:changeLeftBackground == index}"> {{item}} &l...

    vue单选按钮,选中改变其当前按钮颜色

    html:
     <span v-for="(item,index) in state" :key="index"
      @click="leftChange(index)" 
      :class="{ liBackground:changeLeftBackground == index}"> {{item}} </span>
     
    
    
    css:
      .liBackground {  background: darkcyan; }
    
    js:
    1.
     return {
    		          changeLeftBackground: 0,    //默认选中第一个
    		          state:['兼职','全职','自由职业'],// 模拟数据 所有标签
    		}
    2.
     methods:{
    	  leftChange(index) {
    	  		//当前的背景颜色赋给当前点击的索引
                 this.changeLeftBackground = index;
           },
    }
    
    

    好了,根据上面做法我们就能很轻松的实现按钮的单选效果!
    如果有问题,可以加我微信一起讨论,我们一起进步!
    屏幕前的你,加油!

    在这里插入图片描述

    展开全文
  • vue单选按钮 按钮格式为图片

    千次阅读 2020-06-12 17:32:03
    vue中不使用`<input type="radio"/>`实现单选 多个选项 html部分 <ul> <li v-for="(item,index) in arr" :key="item.id" @click="chooseClick(index)"> <span> <img v-if="item....

    在这里插入图片描述

    vue中不使用`<input type="radio"/>`实现单选 多个选项
    

    html部分

    <ul>
            <li v-for="(item,index) in arr" :key="item.id" @click="chooseClick(index)">
              <span>
                <img v-if="item.isChoose" src="./img/choose.png" alt />
                <img v-else src="./img/chooseno.png" alt />
              </span>
              <span>{{item.title}}</span>
            </li>
    </ul>
    

    js部分

    data() {
        return {
          n: 6,
          arr: [
            { id: "1", title: "选项1", isChoose: false },
            { id: "2", title: "选项2", isChoose: false },
            { id: "3", title: "选项3", isChoose: false },
            { id: "4", title: "选项4", isChoose: false },
            { id: "5", title: "礼", isChoose: false },
            { id: "0", title: "其他问题", isChoose: false }
          ],
          imgarr: []
        };
      },
      methods:{
          chooseClick(index) {
          //选择问题类型
          for (let i = 0; i < this.arr.length; i++) {
            if (index == i) {
            	//选中之后可以进行取消
              // this.arr[index].isChoose = !this.arr[index].isChoose;
              //选中之后不可取消  必须有一个是选中的
              this.arr[index].isChoose = true;
              this.n = index;
            } else {
              this.arr[i].isChoose = false;
            }
          }
        },
    
    .questionType {
      font-size: 0.14rem;
      text-align: left;
      padding: 0.1rem 0.15rem;
      padding-bottom: 0rem;
      box-sizing: border-box;
      p {
        letter-spacing: 1px;
        font-size: 0.14rem;
        padding-bottom: 0.15rem;
        box-sizing: border-box;
      }
      ul {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        li {
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 0.1rem 0rem;
          padding-left: 0.1rem;
          box-sizing: border-box;
          border-top: 1px solid #ccc;
          span:nth-child(1) {
            display: block;
            margin-right: 0.1rem;
            img {
              width: 0.12rem;
              height: 0.12rem;
              vertical-align: middle;
            }
          }
          span:nth-child(2) {
            font-size: 0.12rem;
            color: #777;
          }
        }
      }
    }
    
    
    
    
    展开全文
  • Vue单选按钮radio输入绑定

    千次阅读 2019-11-27 13:34:17
    <...-- 单选按钮的文字和input组合 --> <div style="display: inline-block;"> <input type="radio" id="tradein" value="radioin" v-model="pickedradio" /> <labe...

    html部分代码如下:

    <!-- 单选按钮的文字和input组合 -->
    <div style="display: inline-block;">
        <input
        type="radio"
        id="tradein"
        value="radioin"
        v-model="pickedradio"
      />
        <label for="tradein" class="chexwords">进口</label>
    </div>
    <!-- 单选按钮的文字和input组合 -->
    <div style="padding-left:40px;display: inline-block;">
        <input
        type="radio"
        id="tradeout"
        value="radioout"
        v-model="pickedradio"
      />
        <label for="tradeout" class="chexwords">出口</label>
    </div>
    

    css部分代码如下:

    input.chosecheckbox:checked{
    	border:none;
    	background-image: url(../images/radiochecked.png);
    	background-size: cover;
    }
    label.chexwords{
    	font-family: PingFangSC-Regular;
    	font-size: 14px;
    	color: #333333;
    	letter-spacing: 0;
    	line-height: 14px;
    	vertical-align: middle;
    	margin: 0;
    	padding: 0;
    	font-weight: normal;
    }
    

    js部分代码如下:

    data:{
    	pickedradio:"radioin",//默认选中进口
    }
    

    效果如图所示:
    在这里插入图片描述

    展开全文
  • vue把按钮变成单选按钮 Vue单选按钮 (Vue Radio Toggle Buttons) ???? Radio toggle buttons for Vue. V Vue的单选按钮。 View demo 查看演示 Download Source 下载源 Installation️安装 (⚙️ Installation) ...

    vue把按钮变成单选按钮

    Vue单选按钮 (Vue Radio Toggle Buttons)

    🔘 Radio toggle buttons for Vue.

    V Vue的单选按钮。

    Installation️安装 (⚙️ Installation)

    npm install vue-radio-toggle-buttons
    # or
    yarn add vue-radio-toggle-buttons

    用法 (Usage)

    main.js:

    main.js:

    import Vue from 'vue';
    import VueRadioToggleButtons from 'vue-radio-toggle-buttons';
    
    import App from './App.vue';
    
    import 'vue-radio-toggle-buttons/dist/vue-radio-toggle-buttons.css';
    
    Vue.use(VueRadioToggleButtons);
    
    new Vue({
    	el: '#app',
    	render: h => h(App)
    });

    App.vue:

    App.vue:

    <template>
    	<RadioToggleButtons
    		v-model='currentValue'
    		:values='values'
    		color='purple'
    		textColor='#000'
    		selectedTextColor='#fff'
    	/>
    </template>
    
    <script>
    export default {
    	name: 'App',
    	data() {
    		return {
    			values: [
    				{ label: 'Value 1', value: '1' },
    				{ label: 'Value 2', value: '2' },
    				{ label: 'Value 3', value: '3' },
    			],
    			currentValue: ''
    		}
    	}
    };
    </script>

    📚API (📚 API)

    <RadioToggleButtons> (<RadioToggleButtons>)

    🔰道具 (🔰 Props)

    values (values)

    Type: Array<{ label: string, value: string }> Required: true

    类型: Array<{ label: string, value: string }> 必需: true

    Values of radio toggle buttons.

    单选按钮的值。

    color (color)

    Type: string Default: '#333'

    类型: string 默认值: '#333'

    Primary color of radio toggle buttons.

    单选切换按钮的原色。

    textColor (textColor)

    Type: string Default: '#333'

    类型: string 默认值: '#333'

    Text color of radio toggle buttons.

    单选切换按钮的文本颜色。

    selectedTextColor (selectedTextColor)

    Type: string Default: '#eee'

    类型: string 默认值: '#eee'

    Text color of selected item of radio toggle buttons.

    单选切换按钮的所选项目的文本颜色。

    翻译自: https://vuejsexamples.com/radio-toggle-buttons-for-vue/

    vue把按钮变成单选按钮

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Document&l.
  • vue实现单选按钮 页面单选框

    千次阅读 2019-09-26 17:14:10
    vue实现单选按钮
  • Vue Elementui 单选按钮

    2020-12-02 19:16:17
    Vue单选按钮 <el-table-column label="" width="50"> <template scope="scope"> <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope)"><span></...
  • vue 监听单选按钮及三元表达式关联切换
  • vue实现 单选按钮

    千次阅读 2020-07-22 16:25:58
    }, mounted(){ this.title = this.$route.meta.title; // 导航栏信息 }, components:{ Navheader, } }
  • vue 表格单选按钮

    千次阅读 2019-06-05 11:17:19
    currentid:'', column:[ { title:'选择接单', key: '', render:(h,params) => { let id = params.row.orderNo; let defaultS = true; if(this.currentid == id){ defaultS = true;...} el...
  • vue实现单选按钮的动态渲染

    千次阅读 2020-06-14 11:05:57
    vue实现单选按钮radio选择时显示不同内容 看下图 代码如下: <%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <!DOCTYPE ...
  • vant+vue(自定义单选、复选按钮图标以及扩大单选按钮范围) 主要记录vant和vue使用过程中遇见的问题以及解决方案 文章目录vant+vue(自定义单选、复选按钮图标以及扩大单选按钮范围)前言一、单选按钮图标自定义?...
  • vue 表格单选按钮的实现

    千次阅读 2019-06-05 10:51:12
    return{ orderNo:'', columns: [ { title:'', key: '', render:(h,params) => { let orderNo = params.row.orderNo; let order...
  • Vue 实现按钮单选

    千次阅读 2018-07-17 09:46:00
    1、 遇到的第一种情况是通过ulli标签来实现的。 因为 for-in在传递参数的时候是可以传递index作为第二个参数的,所以,可以在data里面设置一个变量 sel,来存储选中的序号(可以设置一个默认值),然后和index...
  • 前段时间接到一个任务,需要做一个自定义的单选和多选按钮,但是之前都是用现成的UI框架,都不用自己写样式,直接一套就是干!但是进公司后,发现部门不适用外部UI框架,好吧,那我就自己写呗! 构思 我想到的办法...
  • vue基础实践1:单选按钮和复选按钮特点 单选按钮和复选按钮特点: 1.按照v-model进行分组,单选框准备的数据是一个值,复选框准备的数据是一个数组 2.每一个框都有自己的value,谁被选中,数值就是被选中元素的...
  • 主要介绍了vue 表单之v-model绑定单选按钮radio的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一款简洁美观的vue基于element-ui单选按钮美化插件,有多种样式可以选择的单选按钮美化代码,点击切换时还带有动画效果。
  • VUE单选按钮el-radio,选择不同触发不同的事件 下面展示一些 代码片。 改变选择用的是 @change 而不是 @click <el-radio-group v-model="radioCreat" @change="agreeChange"> <el-radio label="创建" ...
  • 下面给大家介绍Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题。 摘要: 表单标签取值问题中,单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况...
  • vue element ui table 单选按钮

    千次阅读 2019-04-28 15:28:04
    <template> <el-dialog title='数据源列表' :visible.sync="dialogFormVisible" width="50%" append-to-body> <el-table size='medium' :data="tableData" border style="width:100%;...
  • vue封装一个单选按钮组件 实际开发中根据需求和UI图 这种简单的封装一个单选按钮还是很有必要的 <template> <div class="radio-group"> <a href="#" v-for="(item,index) in options" :key=...
  • vue项目中,element table需要单选,但是组件自带的单选选中样式为高亮,不如单选框明显,想要改为单选框实现如下: handleRadioChange(e, scope.row)">export default {data() {return {tableData: [{ id: 1, date: '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,152
精华内容 2,060
关键字:

vue单选按钮

vue 订阅