精华内容
下载资源
问答
  • 分析:1、问题就是将input radio单选框改造成单击可以取消其选中状态2、单纯的对input radio进行js控制行不通,因为radio是通过v-repeat出来的,有很多个,如果每一个都去获取元素的话,执行效率太低,failed3、给.....

    93053e3caac2

    咳咳。。。如标题所讲,看起来好简单的样子,但是这个需求在一个Vue架构的中大型项目中实现起来又貌似不是想象中的那么容易。以下是我的思路,愚见求各位大佬指教。

    分析:

    1、问题就是将input radio单选框改造成单击可以取消其选中状态

    2、单纯的对input radio进行js控制行不通,因为radio是通过v-repeat出来的,有很多个,如果每一个都去获取元素的话,执行效率太低,failed

    3、给radio添加click事件,判断checked属性,如果为true则取消checked,但由于radio每次click都会将自己的checked置为true(Vue的数据双向绑定速度也是很快的),数据赋值速度之快以至于每次click获取到的checked值都为true,failed

    4、当一个radio从未选中到选中状态,会先触发click再触发change事件,因此只要在click事件判断当前radio是否触发了change事件,如果没触发change事件说明当前radio是选中状态,此时则把该radio的checked置为false,就可以实现单击选中状态的radio取消其选中状态

    5、以上第4点有一个逻辑漏洞,因为click先触发,change后触发,那如何在click中判断当前radio是否触发了change呢?需要将click事件中的js判断逻辑手动放到change触发之后执行,则将click中的逻辑放在setTimeout延迟0秒,手动将这段逻辑执行排在了change事件队列的后面

    6、多说无益,打码:

    93053e3caac2

    7、以上代码中的changed就作为判断依据,因为这只是改造了原生的radio,所以是不会污染原来绑定的数据,可以放心去撸后面的码

    8、下一步优化就是把这段逻辑封装到Vue中的directive作为公共radio组件,见以下代码

    93053e3caac2

    9、组件分析:没什么好说的,就是单纯的把第6点的逻辑封装在了一个公共的directive组件中(无奈,因为使用的的是Vue1,这个版本暂时还没有虚拟DOM,其实更好的做法是把它做成一个虚拟DOM)

    10、Vue中使用这个公共组件,只需要加'v-radio'属性即可

    93053e3caac2

    展开全文
  • 1、iview+vue中,对表头的动态设置:iview表头若是需要动态设置,可以有两个方法,第一种:children: [{title:‘2017年‘,align:‘center‘,key:‘firstYear‘,renderHeader: (h, index)=>{return h(‘div‘, {...

    1、iview+vue中,对表头的动态设置:

    iview表头若是需要动态设置,可以有两个方法,第一种:

    children: [

    {

    title:‘2017年‘,

    align:‘center‘,

    key:‘firstYear‘,

    renderHeader: (h, index)=>{return h(‘div‘, {

    domProps: {

    innerHTML:this.data5.lastYear + ‘年‘}

    });

    }

    },

    {

    利用renderheader属性来设置表头。iview中的table自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column 和 index,分别为当前列数据和当前列索引。还有一种方式是在直接调用title更改:

    this.columns4[2].children[0].title = this.timeYear.lastYear;

    但是这种方式可能会引起Vue的update无限循环警告。建议使用第一种方法。

    2、iview+vue中,表单验证select出错:

    可能在使用iview表单的select时,发现代码没有书写错误,但是验证功能出现问题,这是因为iview默认类型与最终select的需要验证的结果类型不一致。

    3、iview+vue中,radio选择问题:

    在iview的单选radio中,绑定选中状态lable = “0”与获取选中状态status = 0 是不匹配的,应为“0”。

    结论:在iview使用过程中,要注意默认类型问题,很容易出现接收类型与默认类型不一致的情况而导致出现错误。对与表格自定义列的问题,render自定义列内容,renderheader自定义列头。

    展开全文
  • 自定义vue radio控件

    千次阅读 2018-01-20 17:05:30
    如何使用vue自定义radio控件? 背景 原生浏览器的radio控件的样式谁用谁知道,一个字丑! 所以今天要使用vue之间封装一个美美哒的radio控件. 实现功能 自定义v-model,使组件之间数据能够进行双向绑定. 使用...

    如何使用vue自定义radio控件?

    背景

    原生浏览器的radio控件的样式谁用谁知道,一个字丑! 所以今天要使用vue之间封装一个美美哒的radio控件.

    实现功能

    1. 自定义v-model,使组件之间数据能够进行双向绑定.
    2. 使用checked属性默认选中radio
    3. 使用disabled属性禁用radio
    4. 当用户点击radio时触发组件上绑定的change事件

    代码实现

    1. 定义脚本
    <script>
    export default {
      name:'ui-radio',//radio组件名称
      model: {//自定义 v-model的 prop和event,这个定义的意思就是使用change事件更新model的值,以此来实时更新v-model的值
        prop: 'model',
        event: 'change'
      },
      props:{
        value:{//radio的value属性
          type:[String,Number],
          require:true
        },
        model:{//这里的model指的是上面定义的v-model的prop
          type:[String,Number],
          require:true
        },
        checked:{//是否默认选中
          type:Boolean,
          default:false
        },
        disabled:{//是否禁用
          type:Boolean,
          default:false
        }
      },
      mounted:function(){//当dom渲染完成,判断组件是否默认选中
        if(this.checked===true)
          this.updateVal();
      },
      methods:{
        updateVal:function(){//当用户点击radio时,触发change事件更新v-model
          this.$emit('change',this.$refs.radio.value);
        }
      }
    }
    </script>
    
    1. 定义组件模板
    <template>
      <!--这里设置了选中后的radio样式类,和禁用后的样式类-->
      <label class="ui-radio" :class="{'checked':model==value,'disabled':disabled}">
        <input type="radio" ref="radio" :value="value" @click="updateVal" :disabled="disabled">
      </label>
    </template>
    
    1. 定义样式(样式就不再细说了,可以在博客底部打开code sandbox 自己调试)
    <style>
    .ui-radio{
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #4693fe;
      display: inline-block;
      position: relative;
    }
    .ui-radio.disabled{
      border-color: #ccc;
    }
    .ui-radio::after{
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -5px 0 0 -5px;
      background-color: #4693fe;  
      transition: all .5s ease;
      opacity: 0;
      transform: scale(0);
    }
    .ui-radio.disabled::after{
      background-color: #ccc;
    }
    .ui-radio.checked::after {
       opacity: 1;
       transform: scale(1);
    }
    .ui-radio input[type=radio]{
      opacity: 0;
      margin: 0;
    }
    </style>
    

    效果和示例代码##


    CSDN markdown 禁用了iframe, 有翻墙工具的可以点击codesandbox demo.

    展开全文
  • 代码{{v2}}{{v3}}export default {data () {return {v2: ['a', 'b'],v3: 'aa'}}}在checkbox中,当value值在v2数组中能查询到,改checkbox就是...所以v3是一个字符串,value值和其相等的就会被选中vue中使用radio参...

    代码

    {{v2}}

    {{v3}}

    export default {

    data () {

    return {

    v2: ['a', 'b'],

    v3: 'aa'

    }

    }

    }

    在checkbox中,当value值在v2数组中能查询到,改checkbox就是选中状态,当对checkbox进行操作时,v2数组也同样变化

    在radio中,由于只能有一项选中,所以v3是一个字符串,value值和其相等的就会被选中

    vue中使用radio参考示例

    使用 #绑定的是字符串的值 "1",如果想绑定为整形,使用:lable,看下面的例子

    未使用

    import { updateBasicInfo } from "@/api/service"

    export default {

    props: {

    readOnly: {

    type: Boolean,

    default: false

    },

    basic_info: {

    type: Object,

    default: () => {}

    },

    node_key: String,

    },

    data () {

    return {

    checked: ''

    }

    },

    watch: {

    basic_info() {

    this.checked = this.basic_info.http_dns

    },

    basic_info() {

    if (this.basic_info.http_dns) {

    this.checked = this.basic_info.http_dns

    } else {

    this.checked = '0'

    }

    }

    },

    methods: {

    updateChecked(val) {

    this.basic_info['http_dns'] = val

    updateBasicInfo({'node_key': this.node_key, 'basic_info':this.basic_info}).then(() => {

    this.$notify({

    message: "更新成功",

    type: "success",

    duration: 500

    });

    }).catch(error => {

    console.log(error)

    })

    }

    },

    mounted() {

    this.checked = ''

    }

    }

    radio选中的值绑定整形例子

    展开全文
  • vueradio

    千次阅读 2019-09-27 16:28:35
    radio 互斥,是通过 v-model 的变量名一致产生的 如果没有设置value, 则不会变为boolean 如果要设置默认选中,则v-model 变量的值和选中的值保持一致 <!DOCTYPE html> <html lang="en"> <head> ...
  • Vue 双向绑定MVC模式以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新MVVM模式MVVM模式就是Model–View–ViewModel模式。它实现了View的变动,自动反映在 ...
  • Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。文本数据绑定最常见的形式...
  • Vue radio显示性别

    2020-05-26 09:22:24
    <div class="form-group">...label class="radio-inline sex"> <input type="radio" name="sex" id="man" value="0" v-model="sex"> 男 </label> <label class="radio-inline"> <
  • vue Radio自定义图片

    千次阅读 2019-07-16 10:18:42
    css: .radioStyle { display:inline-block; width: .24rem; height: .24rem;... background: url("img/radio_icon.png")0 -0.34rem no-repeat;background-size: 100%; margin-right: 0.2rem; } ....
  • vue封装radio组件

    2020-06-17 23:34:00
    la-radio v-model="radioVal" name="男" val="1" /> data(){ return { radioVal:'1' } }, 二、组件的封装 <div class="laRadio"> <span>{{name}}</span><input type="radio" :...
  • i++) { list[i].optionsCheck = '' } 模板部分绑定radio {{item.question}} {{subItem.answer}} // 注意,此处v-model绑定的是上一层for中的optionsCheck 数据提交时候的处理 let publishData = [] for (let i = 0;...
  • vue 表单 input radio

    2021-01-19 22:06:33
    <body> <div id="app"> <div> <span>性别:<...input type="radio" id="male" value="1" v-model='gender'> <label for="male">男</label> <input typ
  • radio 的循环问题 vue

    2020-07-16 09:57:20
    <div class="flex just border" v-for="(item,index) in options" :key="index"> <label :for="item">...input type="radio" v-model="value" @change="getChinse" :id="item" :value="item"> <
  • vue面试题第一部分(一句话就能回答的面试题)1.css只在当前组件起作用答:在style标签中写入scoped即可 例如:2.v-if 和 v-show 区别答:v-if按照条件是否渲染,v-show是display的block或none;3.$route和$router的...
  • 在下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity。TheReactivity System当你第一次看到它时,Vue的响应系统看起来很神奇。看如下代码片段:不知何故,Vue只知道如果价格发生变化,它应该做...
  • vue radio-group 选择问题

    千次阅读 2018-05-21 17:34:43
    需求: 点击radio group中的某一个radio,弹出对话框让用户进行确认,根据用户点击的结果进行不同的操作问题: 因为vue是双向绑定的,所以点击radio之后,无论用户点击对话框中的哪个结果,radio的样式就已经改变...
  • vue.js循环radio的实例

    2020-10-16 00:55:56
    今天小编就为大家分享一篇vue.js循环radio的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 相信很多人都知道双向绑定原理是基于Object.defineProperty实现的,通过该方法将对象的属性转化为getter/setter,进而实现响应式,(顺便提一句该方法在低版本的浏览器没有很好的支持,所以这也是ie8以下不支持vue的...
  • vue.js radio

    2019-10-07 09:37:00
    <input type="radio" v-bind:id="item.id" v-bind:value="item.id" v-model="checkedStudent"> <label v-bind:for="item.id">{{item.name}} <span>{{checkedStudent}} var vm = new Vue({ ...
  • vue实现自定义radio组件

    千次阅读 2019-08-18 14:09:02
    效果展示 ...radio-group v-model="radioIschecked"> <radio label="个人" value="1"></radio> <radio label="收藏" value="2"></radio> </radio-group> Ra...
  • checkbox 和 radio 使用 checked 属性和 change 事件; select 字段将 value 作为 prop 并将 change 作为事件。 7、什么是 MVVM? Model–View–ViewModel (MVVM) 是一个软件架构设计模式,由微软 WPF 和 ...
  • 题目描述根据后台传来的数据,动态渲染到页面上,可是用element-ui里的radio-group组件一开始不好默认选中题目来源及自己的思路相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)// 数据let data = {name: '...
  • 缘由: 用过vue的都知道,页面上会有很多枚举类型的字段需要展示,下拉框、radio、表格显示等,例如:性别(男、女) 状态(未完成、进行中、已完成),将他们统一管理起来,拓展性才能更强,那么添加一个类型则无需修改...
  • vueradio和checkout

    2018-12-15 13:53:07
    单选 &lt;div v-for="...radio" name="test" :id="item.id" :value="item.checked" @change="check_question(index,item)" class="a-radio"&
  • vue封装chekbox和radio

    2021-03-21 21:04:48
    option-box组件 <template> <div :class="[ 'optionBox', OptionChecked ? 'optionBoxChecked' : '', ... type === 'radio' ? 'optionBoxRadio' : '', ]" @click="onChangeChecked" > {
  • vue.js循环radio

    千次阅读 2018-07-27 14:28:09
    最近在做一个组件联动的,需要循环展示el-radio,花了很多时间现在记录一下,也给遇到类似问题的小伙伴一个参考 &lt;el-radio-group v-model="radioArray[item.name]" @change="...

空空如也

空空如也

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

radiovue

vue 订阅