选中radio或者checkbox需要注意的是:

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

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

不多说了,直接上代码

<div v-for="(item,index) in product_test" >
<input name="Fruit" class="input-fruit" :checked="product_test_index_selected==index?true:false" type="radio" @change="onRadioChange(index)">
</div>

js部分

data() {
return {
product_test_index_selected: 0, // radio默认选择第一个
};
}, onRadioChange(index) {
this.product_test_show_index_selected = index;
},

想实现每次点击之后选项默认选择为第一个,需要在使用完 product_test_index_selected 之后,将其更新为0,表示radio选中第一个

每天一点点之vue框架开发 - vue坑-input 的checked渲染问题的更多相关文章

  1. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  2. 每天一点点之vue框架开发 - vue组件之间传值(父向子传值)

    路由文件 { path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/pr ...

  3. 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数

    import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...

  4. 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

    1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...

  5. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  6. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  7. 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  8. 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...

  9. 每天一点点之vue框架开发 - vue-router路由在循环中携带参数

    场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...

随机推荐

  1. java基础面试题(转)

    这里收集了一些java 面试题的链接: http://blog.csdn.net/jackfrued/article/details/44921941 原文来自:http://www.cnblogs. ...

  2. 【替代语法】PHP中冒号、endif、endwhile、endfor这些都是什么

    我们经常在wordpress一类博客程序的模板里面看到很多奇怪的PHP语法,比如: <?php if(empty($GET_['a'])): ?><font color=" ...

  3. Day1-Luogu-1631

    题目描述 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2N2个和,求这N^2N2个和中最小的N个. 输入输出格式 输入格式: 第一行一个正整数N: 第二行N个整数A_iAi​, ...

  4. JdbcTemplate常用方法

    JdbcTemplate简介 JdbcTemplate是Spring JDBC的核心类,借助该类提供的方法可以很方便的实现数据的增删改查. Spring对数据库的操作在jdbc上面做了深层次的封装,使 ...

  5. 实验吧-杂项-64格(64进制--base64索引)

    下载gif,Winhex打开发现文件头缺失,加上文件头GIF89得到正常图片,用帧分解工具把每一帧分解. 图片主要是一个8×8的方格,好像没什么线索,把每一帧图片上小黄人的占格的位置数出: 17 54 ...

  6. 五 Hibernate的其他API,Query&Criteria&SQLQuery

    Query Criteria SQLQuery Query接口:用于接收HQL,用于查询多个对象 HQL:Hibernate Query Language  Query条件查询: Query分页查询: ...

  7. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:接口的基本实现

    interface A{ // 定义接口A public static final String AUTHOR = "李兴华" ; // 全局常量 public abstract ...

  8. Vue的7属性-8方法-7指令

    Vue的7属性: el属性 绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符 data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在dat ...

  9. docker-compose 修改zabbix images 添加微信报警插件 时间同步 中文乱码 添加grafana美化zabbix

    我们先来看一下我们要修改得  zabbix.yaml           github   https://github.com/bboysoulcn/awesome-dockercompose ve ...

  10. Readiness 探测【转】

    除了 Liveness 探测,Kubernetes Health Check 机制还包括 Readiness 探测. 用户通过 Liveness 探测可以告诉 Kubernetes 什么时候通过重启容 ...