精华内容
下载资源
问答
  • 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" :...

    一、组件的使用

    <la-radio
       v-model="radioVal"
       name="男"
       val="1"
    />
    data(){
      return {
        radioVal:'1'
      }
    },

    二、组件的封装

    <div class="laRadio">
        <span>{{name}}</span><input type="radio" :value="val" v-model="innerVal">
    </div>
    props:{
       value:null,
       name:null,
       val:null
    },
    computed:{
       innerVal:{
            get(){
               return this.value
            },
            set(value){
               this.$emit('input',value)
           }
       }
    }

    三、关键

    1、封装radio时,每一个input会绑定一个value属性;同一组input框的v-model会绑定同一个属性innerVal,发生改变后innerVal取到当前input的value值

    2、使用v-model实现组件间通讯时,在子组件中要完成获取父组件传值和设置父组件的值,要使用计算属性,并用get和set的方式设置属性

    四、另外

    1、v-model 会忽略所有表单元素的 valuecheckedselected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    2、v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

    text 和 textarea 元素使用 value property 和 input 事件;

    checkbox 和 radio 使用 checked property 和 change 事件;

    select 字段将 value 作为 prop 并将 change 作为事件。

    展开全文
  • 主要介绍了vue.js选中动态绑定的radio的指定项,需要的朋友可以参考下
  • 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的。 <!DOCTYPE HTML> <html> <head> <title>...
  • 每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,...
  • 一、首先来个图 二、再来盘代码 HTML &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;selectCate&amp;quot;&amp;amp;gt; //循环!想几个有几个o(* ̄︶ ̄*)o ...

    一、首先来个图

    这里写图片描述

    二、再来盘代码

    HTML
    <template>
        <div class="selectCate">
    	    //循环!想几个有几个o(* ̄︶ ̄*)o
            <div class="add-item-num" v-for="(cate, index) in cateInfos">
    
                <div class="item-num-left">
    	            //这个是文字
                    <p class="add-item-title">{{cate.productTypeName}}</p>
                </div>
                <div class="item-num-right" @click="select(index,cate.productTypeID)">
    				//这个是灰色的图标
                    <icon v-if="!cate.isON" :icon="'btn_choice'" :ftSize="'18px'"></icon>
                    //这个是点亮的图标
                    <icon v-else :icon="'btn_choice_pro'" :ftSize="'18px'"></icon>
                </div>
            </div>
    		//这个是按钮,inputIsOk 控制样式转换
            <div :class="[inputIsOk ? 'preview-btn2' : 'preview-btn1']"  
    		        @click="cateOK">确定</div>
    
        </div>
    </template>
    
    好了,大菜来了!script
    <script type="text/ecmascript-6">
    	  import icon from "#/common/icon/icon"
    	
    	  export default {
    	      components: {icon},
    	      data() {
    	          return {
    			       
    	              //自己随便捏造几项吧!
    	              cateInfos:[
    						{productTypeName: "测试1", productTypeID: 1, isON: false},
    	                    {productTypeName: "测试2", productTypeID: 2, isON: false}
    					],
    				  //控制按钮的变量
    				  inputIsOk: false,
    				  //选择的ID
    	              selectId:0,
    	          }
    	      },
          methods: {
               select(index, id) {
                   //按钮改变
                   this.inputIsOk = true;
                   //记录选中的值
                   this.selectId = id;
                   //单选效果
                   //cates是引用,改变cates就是改变cateInfos
                   let cates = this.cateInfos;
                   for (let i in cates) {
                       //注意i是个字符串
                       if (parseInt(i) === index) {
    	                   //点亮
                           cates[i].isON = true;
                       } else {
    	                   //变灰
                           cates[i].isON = false;
                       }
                   }
                   console.log(JSON.stringify(cates));
               },
               cateOK(){
                   if(this.inputIsOk){
                     //点击事件
                     console.log('ok');
                   }
                   //否则就是点不动,相当于disabled
               }
           }
    }
    </script>
    

    这里写图片描述

    加上CSS

    为了好看的效果,还是贴出来好了,万一自己用呢( ̄︶ ̄)↗

    <style lang="scss" scoped>
        @import "../../../../common/mixin";
        @import "../../../../common/color";
    
        .selectCate {
    
            width: 100%;
            height:100vh;
            background:$body-grey;
            .add-item-num:not(:last-child){
                @include margin-border-1px(12px);
            }
            .add-item-num {
                width: 100%;
                height: 44px;
                font-size: 14px;
                background: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
    
    
                .item-num-left {
                    display: flex;
                    align-items: center;
    
                    .add-item-title {
    
                        margin-left: 12px;
                        color: #666666;
    
                    }
                }
    
                .item-num-right {
                    padding: 12px;
                    color: #333333;
                }
            }
            /*预览按钮*/
            .preview-btn1 {
                width: 327px;
                height: 38px;
                line-height: 38px;
                text-align: center;
                background: #CECECE;
                color: #FFFFFF;
                border-color: #CECECE;
                border-radius: 19px;
                margin: 24px;
                font-size:14px;
    
                position: absolute;
                bottom: 0;
                left: 0;
    
    
    
            }
            .preview-btn2 {
                @extend .preview-btn1;
                background: #23CDC8;
                border: 0.5px solid #0FAFAA;
                color: #FFFFFF;
            }
    
    
        }
    
    展开全文
  • /deep/.el-radio { .el-radio__label { color: #000; font-weight: 400; } &.is-checked { .el-radio__inner { background-color: #f06409 !important; border-color: #f06409; } } .el-radio__inner...
    /deep/.el-radio {
      .el-radio__label {
        color: #000;
        font-weight: 400;
      }
      &.is-checked {
        .el-radio__inner {
          background-color: #f06409 !important;
          border-color: #f06409;
        }
      }
    
      .el-radio__inner {
         鼠标经过边框颜色改变
        &:hover {
          border-color: #f06409;
        }
      }
    }

     

    展开全文
  • 主要介绍了vue radio单选框,获取当前项(每一项)的value值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了elementUi vue el-radio 监听选中变化,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue.js循环radio的实例

    2020-10-16 00:55:56
    今天小编就为大家分享一篇vue.js循环radio的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue中的radio的使用方法

    万次阅读 2018-06-18 16:00:28
    &lt;html&gt;&lt;head&gt; &lt;script src='js/vue.js'&gt;&lt;/script&gt;&lt;/head&...input type='radio' id='wuhan' value='武汉' v-model='city'/&
    <html>
    
    <head>
    <script src='js/vue.js'></script>
    </head>
    <body>
    <div id="example">
    <input type='radio' id='wuhan' value='武汉' v-model='city'/>
    <label for='wuhan'>武汉</label>

    <input type='radio' id='xian' value='西安' v-model='city'/>
    <label for='xian'>西安</label>

    <input type='radio' id='hangzhou' value='杭州' v-model='city'/>
    <label for='hangzhou'>杭州</label><br>

    <span>欲望都市:{{ city }}</span>
    </div>
    </body>


    <script type='text/javascript'>
    new Vue({
    el: '#example',
    data: {
    flag: true,
    city: ''
    },
    methods: {

    },
    computed: {

    },
    created() {

    }
    });
    </script>
    </html>
    展开全文
  • 默认效果 切换效果 代码 <template> <div id="button-border">...div v-for="(item, index) in radios" :key="item.id">...div class="buttonDefalt" :class="{ buttonActive: item.isChecked }">...
  • vue数据绑定 data() { return { radio2:'', checkbox:[], question:[ { title:"1、请选择你的性别", sex:[ '男','女' ] }, { title:"2、请选择你的爱好", item:[ '打球','读书','画画','游泳','跑步...
  • <template slot-scope="scope"> <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"><i></i></el-radio> </template> </el-table-column> </el-table> 3、修改页面 ...
  • Vue单选按钮radio输入绑定

    千次阅读 2019-11-27 13:34:17
    html部分代码如下: <!-- 单选按钮的文字和input组合 --> <div style="display: inline-block;"> <... type="radio" id="tradein" value="radioin" v-model="pickedradio" /> <labe...
  • 导航 更新单个下拉菜单 更新多个下拉菜单 遇到问题 当我们在layui中使用select、radio、checkbox的时候,我们会发现,即使我们修改了对应的值,但是vue中的值却无动于衷,如何才能让layui中的值,能触发vue中值的...
  • div class="radio-box"> <input name="sex" type="radio" value="0" checked> <label>男</label> </div> <div class="radio-box"> <input name="sex" typ...
  • 主要介绍了vue 表单之v-model绑定单选按钮radio的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • VUE之单选按钮el-radio,选择不同触发不同的事件 下面展示一些 代码片。 改变选择用的是 @change 而不是 @click <el-radio-group v-model="radioCreat" @change="agreeChange"> <el-radio label="创建" ...
  • 自定义vue radio控件

    千次阅读 2018-01-20 17:05:30
    如何使用vue自定义radio控件? 背景 原生浏览器的radio控件的样式谁用谁知道,一个字丑! 所以今天要使用vue之间封装一个美美哒的radio控件. 实现功能 自定义v-model,使组件之间数据能够进行双向绑定. 使用...
  • &lt;template&gt; &lt;div id="app"&gt; &lt;div class="taskList"...radio" name="task" value="1" v-model='selectStatus
  • vue-checkbox-radio一个Vue组件,可轻松设置复选框和单选输入的样式。 示例查看演示和样式示例。 用法复选框 我同意服务条款 收音机 我是机器人 我不是机器人 安装纱线纱线添加vue-checkbox-radio npm npm install ...
  • el-radio使用v-for循环显示 HTML: <el-radio-group v-model="AuthoCheck"> <el-radio v-for="item in authTypeList" :key="item.id" :label="item.value"> {{item.value}} </el-radio> </...
  • 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
  • 先贴灵感来源:添加链接描述 **问题描述:**在写编辑信息弹窗时,性别的值一直不能根据v-model的值选中,但是用{{editForm.sex}}是能正确打印出单选框的label值的。...el-radio class="radio" :label=...
  • vue中的v-model更新radio控件的方式

    千次阅读 2018-04-25 11:10:42
    实践过程中v-model更新radio控件的方式,v-model 指令在表单 &lt;input&gt;及 &lt;textarea&gt;元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素1、v-model绑定radio控件...
  • 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...
  • radio-group @change = " radioChange " > < view class = " xuanze_str " > < label class = " " v-for = " (item, index) in itemObject2 " :key = " item.value " style =" display : flex...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,392
精华内容 5,356
关键字:

radiovue

vue 订阅