文档章节

vuejs 绑定bootstrap 单选按钮

在湖闻樟
 在湖闻樟
发布于 2017/07/26 16:05
字数 163
阅读 72
收藏 0

问题:

vuejs没有办法捕获到bootstrap单选按钮的change事件

解决:自定义vuejs的指令

html代码

<div id='vue-button-radio'>
     <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary" v-for="radio_info in radios" v-radio="selected_radio">
                 <input type="radio" name="radios-test" :value="radio_info[0]">
                 {{ radio_info[1] }}
           </label>
     </div>
    <p>{{ selected_radio }}</p>
</div>

vue代码

var vue_button_radio = new Vue(
{
     el: '#vue-button-radio',
    data:{
        radios: [
             ['test1', '测试1'],
             ['test2', '测试2'],
             ['test3', '测试3'],
             ['test4', '测试4'],            
        ],
        selected_radio: ''
    },
    directives:{
        radio: {
              twoWay: true,
              bind: function() {
                  var self = this;
                  $(self.el).on('click', function() {
                      var v = $(this).find('input').get(0).value;
                      self.set(v);
                  });
              },
              update: function() {
                   var value = this._watcher.value;
                   this.set(value);
                   var btns = $(this.el);
                   btns.removeClass('active');
                   var v = btns.find('input').get(0).value;
                  if (v === value) {
                            btns.addClass('active');
                   }
              }
       }
})

在湖闻樟注:本文地址https://my.oschina.net/soarwilldo/blog/1489092

© 著作权归作者所有

在湖闻樟
粉丝 17
博文 72
码字总数 68653
作品 0
深圳
程序员
私信 提问
从零实现Vue的组件库(十)- Select 实现

当选项过多时,使用下拉菜单展示并选择内容。 Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显; 单选、多选的区分,以及对应处理。 1. 实例 代码 实例地址:Selec...

FatGe
01/24
0
0
【重学Vue】数据响应原理真的是双向绑定吗?

最近 Ant Design Vue 作者 - 唐金州,在某平台开课了,在整个课程中系统的讲述了Vue的开发实战。在第八讲中介绍了Vue双向绑定的问题,这里我整理一些资料客观的分析一下 Vue数据响应原理到底...

D文斌
03/23
0
0
[译] 用 Flask 和 Vue.js 开发一个单页面应用

原文地址:Developing a Single Page App with Flask and Vue.js 原文作者:Michael Herman 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Mcskiller 这篇文章会一步...

Leben_Ito
2018/12/23
0
0
【Vue表单】v-model绑定单选按钮radio

用v-model绑定单选框能带来很多便捷的开发体验。 基础用法 新建一个名为 的数据模型,通过 把两个单选按钮都绑定 , 也绑定了 ,所以单选按钮选了哪项,都会把对应的 值赋给 , 从而使 的内容...

Rabbit_svip
05/12
0
0
Vue.js 2.0之select级联下拉框

在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js ...

w-rain
2017/02/28
5.1K
2

没有更多内容

加载失败,请刷新页面

加载更多

Linux 运行shell文件,出现 $'\r': command not found

运行编写的shell脚本时,出现了 $'\\r': command not found 这样的错误提示。 报错的原因是我们在windows系统操作时,编辑器里的换行符是\r\n ,而Linux上为\n,两个系统之间有差异导致的。 ...

芥末无敌
今天
7
0
Java数据结构(上)

枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) 1.Enumeration(枚举) boolean hasMoreElements( ):测试是否有更多的元素 Object nextElement( ):如果此枚举对象至少还...

Firefly-
昨天
11
0
vue 跨层组件通讯 provide inject

https://cn.vuejs.org/v2/api/#provide-inject 类型: provide:Object | () => Object inject:Array<string> | { [key: string]: string | Symbol | Object } 详细: provide 和 inject 主......

阿豪boy
昨天
7
0
黑马程序员面试宝典(Java)Beta6.0免费下载

场景 JavaSE基础 面向对象特征以及理解 访问权限修饰符区别 理解clone对象 JavaSE语法 java有没有goto语句 &和&&的区别 如何跳出当前的多重嵌套循环? 是否可以继承String? 重载与重写的区别...

badaoliumang
昨天
9
0
监控linux系统状态

查看系统负载: w/uptime 最后面三个数字表示1分钟,5分钟,15分钟平均有多少个进程占用CPU 占用CPU的进程可以是Running,也可以是Waiting 某一时刻1颗CPU只能有一个进程在使用其资源 #查看c...

asnfuy
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部