精华内容
下载资源
问答
  • VUE单选

    2021-05-15 15:33:44
    Document vue react jquery 单选提交

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="box">
            <input type="radio" v-model="favorlang" value="vue" name="vue">vue
            <input type="radio" v-model="favorlang" value="react" name="react">react
            <input type="radio" v-model="favorlang" value="jquery" name="vue">jquery
            <button @click="handleSelect()">单选提交</button>
        </div>
        <script>
            new Vue({
                el:'#box',
                data:{
                    favorlang:'vue'
                },
                methods:{
                    handleSelect(){
                        console.log(this.favorlang)
                    }
                }
            })
        </script>
    </body>
    </html>
    
    展开全文
  • 一、效果如图 二、实现修改单选样式//html//less@bf: 108rem;.radio-wrap{position: absolute;top:100/@bf;right:50/@bf;height: 70/@bf;width: 70/@bf;line-height: 50/@bf;vertical-align: middle;input[type=...

    一、效果如图

    68f84ac1f8aeb0b997c8e03e6351e7bf1e3.jpg

    二、实现

    修改单选样式

    //html

    //less

    @bf: 108rem;

    .radio-wrap{

    position: absolute;

    top:100/@bf;

    right:50/@bf;

    height: 70/@bf;

    width: 70/@bf;

    line-height: 50/@bf;

    vertical-align: middle;

    input[type="radio"] {

    width: 55/@bf;

    height: 55/@bf;

    opacity: 0;

    cursor: pointer;

    }

    label{

    position: absolute;

    left: 0;

    top: 0;

    width: .61rem;

    height:.6rem;

    border-radius: 50%;

    border: 1px solid #999999;

    }

    input:checked+label {

    background: #fde117;

    border: 1px solid #999999;

    }

    input:checked+label::after {

    position: absolute;

    content: "";

    width: .13rem;

    height: .3rem;

    top: .07rem;

    left: .2rem;

    background: #fde117;

    border: 2px solid #333;

    border: 1px solid #333;

    border-top: none;

    border-left: none;

    transform: rotate(45deg);

    }

    }

    }

    展开全文
  • 一、效果如图二、实现修改单选样式//html//less@bf: 108rem;.radio-wrap{position: absolute;top:100/@bf;right:50/@bf;height: 70/@bf;width: 70/@bf;line-height: 50/@bf;vertical-align: middle;input[type=...

    一、效果如图

    5dd878864c3d20252008e67b8e4b8a17.png

    二、实现

    修改单选样式

    //html

    //less

    @bf: 108rem;

    .radio-wrap{

    position: absolute;

    top:100/@bf;

    right:50/@bf;

    height: 70/@bf;

    width: 70/@bf;

    line-height: 50/@bf;

    vertical-align: middle;

    input[type="radio"] {

    width: 55/@bf;

    height: 55/@bf;

    opacity: 0;

    cursor: pointer;

    }

    label{

    position: absolute;

    left: 0;

    top: 0;

    width: .61rem;

    height:.6rem;

    border-radius: 50%;

    border: 1px solid #999999;

    }

    input:checked+label {

    background: #fde117;

    border: 1px solid #999999;

    }

    input:checked+label::after {

    position: absolute;

    content: "";

    width: .13rem;

    height: .3rem;

    top: .07rem;

    left: .2rem;

    background: #fde117;

    border: 2px solid #333;

    border: 1px solid #333;

    border-top: none;

    border-left: none;

    transform: rotate(45deg);

    }

    }

    }

    展开全文
  • 关于vue单选和多选切换过程中的坑 问题:vue单选多选切换时,会报错, children must be keyed: 原因是切换过程中错误栈都在Vue内部 解决办法:select标签加v-if判断,multiple属性加条件multiple,watch监控...

    关于vue单选和多选切换过程中的坑
    问题:vue单选多选切换时,会报错,<transition-group> children must be keyed: <ElTag>原因是切换过程中错误栈都在Vue内部

    解决办法:select标签加v-if判断,multiple属性加条件multiple,watch监控multiple的变化,先关闭select再重新加载。

    <el-select    v-if="update"   >
    	<option :multiple="multiple"></option>
    </el-select>
    
    <script>
    {  
    data(){  
      return {      
      update: true,
      updates:[] ,
       updateIndex:null,
       multiples:[],
       multiple:true,
         } 
     }, 
    methods:{
    a(){
    this.multiple = true
    }
    },
     watch:{  
      'multiple'(){ //单个监控
         this.update = false  
        setTimeout(()=>{   
         this.update = true 
         },300)  
      } ,
         'multiples'(val) {//监控数组时
          this.$set(this.updates, this.updateIndex, false)
          setTimeout(() => {
            this.$set(this.updates, this.updateIndex, true)
          }, 300)
        },
     }}</script>
    

    不足之处:切换过程中有短暂的可见的框变动。功能满足,但实现效果不很理想。

    展开全文
  • vue单选框默认选中,如图: 不能默认显示代码 <Label>是否关键岗位</Label> <RadioGroup v-model="addPosition.isKey"> <Radio label="true"><span>是</span><...
  • vue单选多选,文本域,选择框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8">...
  • Vue单选框多选框输入绑定 此处绑定的是value <div> <form> <input type="radio" value="1" v-model="e" />1 <input type="radio" value="2" v-model="e" />2 </form> {{e}} <...
  • vue单选全选

    2020-07-31 16:00:53
    单选全选 一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的 **el-checkbox** 标签,网址如下 ...
  • vue单选按钮,选中改变其当前按钮颜色 html: <span v-for="(item,index) in state" :key="index" @click="leftChange(index)" :class="{ liBackground:changeLeftBackground == index}"> {{item}} &l...
  • vue 单选 多选

    2019-12-19 15:33:40
    https://blog.csdn.net/Number7421/article/details/81002729
  • vue单选

    千次阅读 2019-03-19 18:50:06
    <input type="radio" class="checkbox" :value="item.id" @click="checked(item.id,$event)" v-model="myCehck"></input> checked(id,e){ this.check=e.target.checked if (e.tar...
  • vue 单选框绑定v-model

    2021-07-07 15:27:05
    单选框绑定v-model 单选框radio绑定v-model绑定的值为radio的value值,而单个复选框checkbox绑定的值则是true 和 false 案例:演示使用单选框切换显示的界面 导入vue: <script src="js/vue.min.js" type="text/...
  • VUE 单选,多选,全选

    2021-07-06 21:40:37
    单选 <template> <div id="messageremind" style="margin: 10%"> <div v-for="(item, index) in list" :key="index"> {{ item.text }} <img :src=" flag == index ? require('../../...
  • 首先,来看一下单选框的样式: <div class="option" v-for="(option, ind) in item.surveyQuestionOptionList" :key="ind"> <input :value="option.selectid" type="radio" :id="'option' + item.qid ...
  • 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 单选框与单选框组 组件

    千次阅读 2019-03-29 16:44:00
    需要把radio组件部分进行重写,让它自己寻找自己的单选框组. 组件 与 组件组 形成数据双向绑定. export default { name: "Radio" , props: [ "value", "label"], // 获取父作用域中的value与label变量...
  • <template> <el-table-column v-else-if="item.prop === 'type'" :prop="item.prop" :label="item.label" :key="index"> <template slot-scope="scope">
  • vue 单选列表 改变样式

    千次阅读 2018-11-01 15:42:08
    循环模板: &lt;ul v-for="(item,index) in List"&gt; &lt;li :class="{active:(clickIndex == index )}"&gt;&lt;/li&gt; &lt;/ul&...单选的样...
  • 关于vue 单选框选中与取消解决方案

    千次阅读 2020-11-03 18:15:25
    首先考虑radio是单选框,且vue的v-model赋值速度非常的快,取消选择又不会触发 radio 的 change 事件,使用click事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果,可以考虑这种情形,因为...
  • 一、效果如图 ...修改单选样式 //html <div class="radio-wrap"> <input type="radio" v-model="pointer" :value="item" :id="'selectDoll_'+index" :disabled="item.money > recharg...
  • 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...
  • 单选、全选功能 可以被循环、互不干扰 就像这样: 一、template部分 使用的UI库是腾讯的 magicbox // 不需要关注其中的类名和变量,只需关注方法:handleCheckedAll、handleChange <div class="group-label...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,681
精华内容 4,272
关键字:

vue的单选

vue 订阅