vue.js动态绑定input的checked
不管<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的更多相关文章
- Vue.js 动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 【前端】vue.js实现按钮的动态绑定
vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定< ...
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
随机推荐
- #define宏作用
预处理器的任务 简单来讲,预处理器的任务就是执行源代码中的预处理指令,并对源代码进行相应的处理.因此,从预处理指令的类型来讲,预处理器的任务包括如下的几个部分: 将其他文件包含到当前文件中. 定义宏, ...
- Werkzeug——python web开发工具包
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826062.html 一:Werkzeug是个啥 1)Werkzeug是一个工具包,它封装了很多东西,诸如 ...
- win黑窗口命令
rd 删除 文件夹, 语法: rd [/S] [/Q] [drive:]path 参数: drive 盘符 path 文件路径 /S 递归删除文件夹( 删除前, 要确认是否进行删除) /Q 关闭 ...
- PAT甲级1017题解——模拟排序
题目分析: 本题我第一次尝试去做的时候用的是优先队列,但是效率不仅代码量很大,而且还有测试样例过不去,很显然没有找到一个好的数据结构来解决这道题目(随着逐渐的刷PAT甲级的题会发现有时选择一个好的解题 ...
- 树莓派使用root操作图形界面使用自带的文件管理器
使用pi用户通过VNC登录图形界面之后,在需要修改一些文件则时提示权限不够, 命令行下使用sudo 运行就可以了.或者直接用root账户. 修改管理员密码:sudo passwd root 修改启用管 ...
- MyBatis mapper.xml中SQL处理小于号与大于号
这种问题在xml处理sql的程序中经常需要我们来进行特殊处理. 其实很简单,我们只需作如下替换即可避免上述的错误: < <= > >= & ' " < ...
- utf8mb4版本设置django
'OPTIONS':{ 'init_command':"SET sql_mode='STRICT_TRANS_TABLES'", 'charset':'utf8mb4',
- 如何将页脚固定在页面底部,4中方法 转载自:W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
- Linux:使用awk命令获取文本的某一行,某一列;sed插入指定的内容到指定文件中
awk相关用法: 1.打印文件的第一列(域) : awk '{print $1}' filename2.打印文件的前两列(域) : aw ...
- Windows10 Docker镜像加速
https://dockerhub.azk8s.cn #Azure 中国镜像 https://reg-mirror.qiniu.com #七牛云加速器 https://registry.docker- ...