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

其实原理是这样的,复选框里只要有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动态绑定input的checked的更多相关文章

  1. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  2. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 【前端】vue.js实现按钮的动态绑定

    vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定< ...

  4. 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  5. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  7. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  8. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  9. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

随机推荐

  1. MAC电脑下Appium + python3 + robotframework ios的真机测试环境搭建

    本人的环境搭建前的准备,MAC电脑一台(macOS Mojave 10.14.0及以上),Xcode 10.0及以上   ,自己注册的一个Apple ID 账户,必须你的电脑能连接互联网,最好不要用公 ...

  2. 渐进增强(progressive enhancement)、优雅降级(graceful degradation)

    渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验. 优雅降级 grace ...

  3. Java 面向对象—杂项(方法不能重写,修饰符,变量)

    一.哪些方法不能被重写? 1.final 修饰的不能重写 2.static 修饰的不能重写 3.private 修饰的,因为私有的在子类中不可见 4.如果跨包的话,修饰符缺省的也不能被重写,因为缺省的 ...

  4. 英语insuraunce保险insuraunce单词

    English Alternative forms insuraunce Etymology From the older form ensurance, see also assurance. Pr ...

  5. Java深入学习(1):多线程

    多线程目的:在同一时刻有多条不同路径执行程序,提高程序运行效率 多线程应用:数据库连接池,多线程文件下载等 注意:在文件下载中使用多线程,无法提高速度 在一个进程中,一定会有主线程 从基础开始,多线程 ...

  6. 4 Android可执行文件

    APK是Android Package缩写,使用zip解压文件即可打开.每个APK文件中都包含一个class.dex文件(odex过的APK文件除外).class.dex文件就是Android系统Da ...

  7. Redux 进阶之 react-redux 和 redux-thunk 的应用

    1. react-redux React-Redux 是 Redux 的官方 React 绑定库. React-Redux 能够使你的React组件从Redux store中读取数据,并且向 stor ...

  8. Java 虚拟机 - GC 垃圾回收机制分析

    Java 垃圾回收(Garbage Collection,GC) Java支持内存动态分配.垃圾自动回收,而 C++ 不支持.我想这可能也是 为什么 Java 脱胎于 C++ 的一个原因吧. GC 的 ...

  9. Oracle数据库备份还原笔记

    Oracle数据库备份还原笔记 通过查阅资料知道Oracle备份还原的方式有三种.分别的是导出/导入.热备份和冷备份.导出/导入是一种逻辑备份.而热备份和冷备份是物理备份.[参考资料(https:// ...

  10. 我的windows开发环境设定与日常使用指南

    目录 开发相关的软件包安装.设定 Visual Studio 默认设定 鼠标右键添加"在此处打开cmd"选项 git gvim notepad++ VSCode-Insider C ...