vue.js选中动态绑定的radio的指定项

 更新时间:2017年06月02日 10:00:50   作者:Coding_xiaoqiu  
这篇文章主要介绍了vue.js选中动态绑定的radio的指定项,需要的朋友可以参考下

上一文,介绍了vue.js动态添加、删除绑定的radio选项,本文介绍如何选中radio的某一项

绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是:

不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中。

选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染checked这个属性就好了.

view 改一下:

"<input type='radio' :name='groupName' :checked='option.checked'>{{option.text}}" 

checked='option.checked'   如果option.checked为true,他就渲染checked这个属性,否则input元素没有这个属性。

这样绑定后,我们在vue的methods里面设置,把当前索引的radio绑定model的checked属性设置为true,其他的必须设置为false,这样才和上面的绑定对应,不然全是true了,绑定就会有问题了。

checkOption: function (e, optionIndex) { 
 $.each(vm.options, function (index, item) { 
  item.checked = false;       
 }); 
 vm.options[optionIndex].checked = true; 
 } 

以上所述是小编给大家介绍的vue.js选中动态绑定的radio的指定项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue Element-ui input 远程搜索与修改建议显示模版的示例代码

    vue Element-ui input 远程搜索与修改建议显示模版的示例代码

    本文分为html,js和css代码给大家详细介绍了vue Element-ui input 远程搜索与修改建议显示模版功能,感兴趣的朋友一起看看吧
    2017-10-10
  • 关于vue2使用element UI中Descriptions组件的遍历问题详解

    关于vue2使用element UI中Descriptions组件的遍历问题详解

    最近element-ui遇到了很多坑,下面这篇文章主要给大家介绍了关于vue2使用element UI中Descriptions组件的遍历问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue路由守卫及路由守卫无限循环问题详析

    vue路由守卫及路由守卫无限循环问题详析

    这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue+Microapp实现微前端的示例详解

    Vue+Microapp实现微前端的示例详解

    这篇文章主要为大家详细介绍了如何实现以vite+vue3+Microapp为主应用,以vue2+element为子应用的微前端,感兴趣的小伙伴快跟随小编一起学习一下吧
    2023-06-06
  • Vue中import与@import的区别及使用场景说明

    Vue中import与@import的区别及使用场景说明

    这篇文章主要介绍了Vue中import与@import的区别及使用场景说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue + typescript + 极验登录验证的实现方法

    vue + typescript + 极验登录验证的实现方法

    这篇文章主要介绍了vue + typescript + 极验 登录验证的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue2如何使用vue-i18n搭建多语言切换环境

    vue2如何使用vue-i18n搭建多语言切换环境

    这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧
    2023-12-12
  • 实现vuex原理的示例

    实现vuex原理的示例

    这篇文章主要介绍了实现vuex原理的示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02

最新评论