精华内容
下载资源
问答
  • vue 复选框 单选Vue增强检查 (vue-enhanced-check) Enhanced checkboxes /radio input, component for vue 2+. 增强的复选框/无线电输入,vue 2+的组件。 Based on first enhancedCheck project (CSS/JS) 基于...

    vue 复选框 单选框

    Vue增强检查 (vue-enhanced-check)

    Enhanced checkboxes /radio input, component for vue 2+.

    增强的复选框/无线电输入,vue 2+的组件。

    Based on first enhancedCheck project (CSS/JS)

    基于第一个EnhancedCheck项目(CSS / JS)

    现场演示 (Live Demo)

    https://keiwen.github.io/vue-enhancedCheck/

    https://keiwen.github.io/vue-enhancedCheck/

    翻译自: https://vuejsexamples.com/enhanced-checkboxes-radio-input-component-for-vue-2/

    vue 复选框 单选框

    展开全文
  • vue 复选框 ,单选

    千次阅读 2018-07-12 10:48:58
    复选框v-model 绑定一个数组,当选中当前项时,改项的value会自动进入数组中,未选中时会自动从数组中删除<div id='example-3'> <input type="checkbox" id="jack" value...
    
    
    复选框
    v-model 绑定一个数组,当选中当前项时,改项的value会自动进入数组中,未选中时会自动从数组中删除
    <div id='example-3'>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    

    </div>

    <script>
        new Vue({
            el: '#example-3',
            data: {
                checkedNames: []
            }
        })
    </script>
    2. 单选框

    道理同上

    <div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div>
    

    new Vue({
      el: '#example-4',
      data: {
        picked: ''
      }
    })



    展开全文
  • 本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue复选框组件 漂亮的复选框 (pretty-checkbox-vue) Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js. 快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成...

    vue复选框组件

    漂亮的复选框 (pretty-checkbox-vue)

    Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Vue.js.

    快速将漂亮的复选框组件(复选框,开关,单选按钮)与Vue.js集成在一起。

    pretty-checkbox-vuex

    安装 (Installation)

    npm i --save-dev pretty-checkbox-vue

    浏览器 (Browser)

    Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:

    包括脚本文件,然后使用Vue.use(PrettyCheckbox);安装组件Vue.use(PrettyCheckbox); 例如:

    <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
    <script type="text/javascript">
      Vue.use(PrettyCheckbox);
    </script>

    模组 (Module)

    import PrettyCheckbox from 'pretty-checkbox-vue';
    
    Vue.use(PrettyCheckbox);

    Or

    要么

    import PrettyInput from 'pretty-checkbox-vue/input';
    import PrettyCheck from 'pretty-checkbox-vue/check';
    import PrettyRadio from 'pretty-checkbox-vue/radio';
    
    Vue.component('p-input', PrettyInput);
    Vue.component('p-check', PrettyCheck);
    Vue.component('p-radio', PrettyRadio);

    用法 (Usage)

    Once installed, it can be used in a template as simply as:

    安装后,可以在模板中简单地使用它,如下所示:

    <p-check name="check" color="success" v-model="check">check</p-check>
    <p-radio name="radio" color="info" v-model="radio">radio</p-radio>
    
    <!-- Or it can be used just like input -->
    
    <p-input type="checkbox" name="check" color="success" v-model="check">check</p-input>
    <p-input type="radio" name="radio" color="info" v-model="radio">radio</p-input>

    物产 (Properties)

    PropertyTypeDefault Value
    typeStringcheckbox (checkbox & input) or radio (radio)
    nameString
    valueAny
    classStringp-default (checkbox & input) or p-default p-round (radio)
    true-valueBoolean or Stringtrue
    false-valueBoolean or Stringfalse
    checkedBooleanfalse
    disabledBooleanfalse
    requiredBooleanfalse
    indeterminateBooleanfalse
    colorString
    off-colorString
    hover-colorString
    indeterminate-colorString
    toggleBooleanfalse
    hoverBooleanfalse
    focusBooleanfalse
    属性 类型 默认值
    类型 复选框(复选框和输入)或单选(广播)
    名称
    任何
    p-default (复选框和输入)或p-default p-round (无线电)
    真值 布尔值或字符串 真正
    虚假价值 布尔值或字符串
    已检查 布尔型
    残障人士 布尔型
    需要 布尔型
    不定 布尔型
    颜色
    变色的
    悬停颜色
    不确定的颜色
    拨动 布尔型
    徘徊 布尔型
    焦点 布尔型

    插槽 (Slots)

    NamePurpose
    default (no name)include label in default mode or for "on" state in toggle mode
    extrainclude icon or svg or image in default mode or for "on" state in toggle mode
    off-labelinclude label for "off" state in toggle mode
    off-extrainclude icon or svg or image for "off" state in toggle mode
    hover-labelinclude label in hover state
    hover-extrainclude icon or svg or image in hover state
    indeterminate-labelinclude label in indeterminate state
    indeterminate-extrainclude icon or svg or image in indeterminate state
    名称 目的
    默认(无名称) 默认模式下包含标签 ,或在切换模式下包含“ on”状态
    额外 默认模式下包含图标svg图像 ,在切换模式下包含“开启”状态
    关闭标签 切换模式下包含“关闭”状态的标签
    异地 切换模式下包含“关闭”状态的图标svg图像
    悬停标签 包括处于悬停状态的标签
    悬停 包括处于悬停状态的图标svg图像
    不确定标签 包括不确定状态的标签
    不确定的额外 包括处于不确定状态的图标svg图像

    翻译自: https://vuejsexamples.com/quickly-integrate-pretty-checkbox-components-with-vue-js/

    vue复选框组件

    展开全文
  • vue.js实现单选框、复选框和下拉框

    万次阅读 多人点赞 2017-05-11 10:45:10
    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。以及使用过程中要注意的问题

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。

    一、单选框

      在传统的HTML中实现单选框的方法如下:
    <div id="app">
        <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label>
        <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label>
    </div>

    注:这里name属性值必须相同,以确保同一时间只有一个能被选中。同时用于识别发送至服务器的数据;value值也很重要,当按钮被选中时,该值将发送给服务器;

      用vue.js实现单选框比较方便,举例如下。我们不再需要name属性,只需要使用v-model指令给每个选项绑定同一个变量就可以确保同一时间只有一个被选中,同时value属性还是需要的,表示选中时的值。
    <div id="app">
        <label>男<input type="radio" v-model="gender" value="man"/></label>
        <label>女<input type="radio" v-model="gender" value="woman"/></label>
        <p>已选:{{gender}}</p><!--如果用原生js实现此功能比较麻烦-->
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                gender:''
            }
        });
    </script>


    二、复选框

      在传统的HTML中实现复选框代码如下:
    <div id="app">
        <input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label>
        <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label>
        <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label>
    </div>

    从以上代码可以看到:HTML中单选框和复选框的构造方法类似,只是type值变成checkbox,同时也用name和value表征一个复选框以及选中情况。

      在vue.js中构造复选框也与单选框类似,只是每个选项框都用v-model绑定一个变量,这些变量一般放在一个对象中,或者为v-model绑定一个相同的属性名称,且属性为数组;针对这两种情况的举例如下:

      使用v-model为每个选项框绑定一个变量:
    <div id="app">
        <label>jack<input type="checkbox" v-model="person.jack"/></label>
        <label>bob<input type="checkbox" v-model="person.bob"/></label>
        <label>alice <input type="checkbox" v-model="person.alice"/></label>
        <p>已选:{{person}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                person: {jack: false, bob: false, alice: false}
            }
        })
    </script>

      从以上代码可以看到:这里已经不需要value属性,为每个属性绑定的值是boolean类型的,当选中时该值变为true,没选中为false;

      给v-model绑定一个相同的数组类型的属性:
    <div id="app">
        <label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
        <label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
        <label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
        <p>已选:{{whom.join('|')}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                whom: []
        }
        })
    </script>

      从代码中可以看到:为每个选项都绑定一个相同的数组名称,这里需要value属性,当被选中时,相应的value值会加入到数组中,取消选中时,删除数组中对应的value值。

    三、下拉框

      传统的用HTML构造下拉框的代码如下:
    <select name="selected">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>

      其中name用于发送给服务器时的数据识别,value为选中时发送给服务器的值。如果option中省略value,那么发送给服务器的值为option标签之间的值。

      用vue2.0实现下拉框的方法如下:
    <div id="app">
        <select v-model="selected">
            <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
        </select>
        <span>已选:{{selected}}</span>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
                selected:''
            }
        });
    </script>

      从代码中可以看到,使用v-for指令,避免重复书写option标签,同时用v-bind指令绑定value属性。当选中某一项时,该选项的value值赋给selected变量。

      不管是html书写,还是vue实现,如果需要实现多选下拉框,只需要在select标签中写入multiple属性(同时vue中,selected变量初始化为一个空数组)。
    展开全文
  • vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果
  • vue复选框单选框绑定总结

    千次阅读 2018-04-25 15:05:00
    复选框 单个复选框,绑定到布尔值: &lt;input type="checkbox" id="checkbox" v-model="checked"&gt; &lt;label for="checkbox"&gt;{{ checked }}&...
  • Vue复选框的全选

    2019-04-27 15:53:00
    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue复选框的全选</title> </head> <body> <div id="app"> ...
  • rowSelection实现复选框单选功能

    千次阅读 2019-09-11 14:18:31
    rowSelection实现复选框单选功能rowSelection实现复选框单选功能第一步:去掉首行的复选框按钮第二步:设置复选框单选功能 rowSelection实现复选框单选功能 由于工作上的要求,现在需要使用复选框的样式,...
  • vue 复选框

    2019-04-11 11:27:07
    checkedSingle (index, subindex) { // 单选按钮 决定全选按钮 let num = 0 // 除了当前选项,其他选中的次数 let flag = false // 其他选项是否都选中 for (let j = 0; j [index].conditionItems.length; ...
  • type (单选框:radio,复选框:checkbox) id value name/v-model(Vue) 点击label联动单选框实现效果 label中的for属性要和input中的id匹配 <input type="radio" id="g" value="坂田银时" name="favourite-...
  • vue.js实现单选框和复选框

    千次阅读 2019-12-17 17:38:58
    vue.js可以使用v-model指令在表单控件元素上创建双向数据绑定,在人际交互方面具有很大的优势。 一、单选框 在传统的HTML中实现单选框的代码如下: <div> <p>性别:</p> <input type="radio...
  • 大致思路:使用数组中元素控制表身复选框是否勾选,以及是否全选 具体思路: 1.先定义一个tableDatas数组,存放被选中的行,v-for渲染的行会根据数组中是否有当前行,来判断当前行的复选框是否勾选 2.点击全选时:把...
  • 复选框3. 下拉框 1. 单选框 radio单选框 : 也是通过v-model结合value来使用的,v-model的值 和value 值对应的那项就是被选中项 <!-- radio单选框 也是通过v-model结合value来使用的,v-model的值 和value 值对应的...
  • 复选框单选 <el-tree check-strictly show-checkbox :data="trreData" @check="checkClick" :props="defaultProps" node-key="id" current-node-key :accordion="true" ref="tree" ></el-tree> // 单选...
  • 1.单个复选框,绑定的是布尔值 <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> 2.多个复选框,绑定的是数组 <div id='example-3...
  • element表格中复选框是默认的,不用废话,下面是个人需求需要改造的单选框 template模板的el-table标签中定义class名和选择方法 js里是selected的方法,对于里面赋值根据需要增减,clearSelection和...
  • 1、安装 通过NPM安装 ...在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueDND) 3、在vue2.0中使用 <template> <div> <el-checkbox :indeterminate="is...
  • 使用elementUI单选框和复选框,动态循环渲染数据时,选中数据无法回显到页面. 原因: 因为Vue的数据劫持机制 解决方案一 尽量避免对data(){return { }}里的数据进行频繁赋值. 尽量避免嵌套方式赋值. <div v...
  • vue中el-tree实现单选复选框

    万次阅读 多人点赞 2018-11-27 11:47:50
    vue中el-tree实现单选复选框 遇到的问题 使用vue的element框架时el-tree时,当填入复选框时,不能单选父节点 解决办法 结合el-tree属性的控制和js配合来实现单选父子节点 去掉父子节点的关联 监听checkbox改变...
  • 1、解决vue页面渲染出现花括号的问题: 在最外层的dom节点上加上v-cloak ,css里面 <div class="detail-content" id="detail-content" v-cloak>...2、vue复选框 模拟checkbox多选全选 ...

空空如也

空空如也

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

vue复选框单选功能

vue 订阅