选中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. 二、spring集成ibatis进行数据源事务管理拦截器环境配置

    1.dataSource-applicationContext.xml文件配置理解:(spring1.2.8+ibatis1.5.3)1.1)配置数据源 DriverManagerDataSource ...

  2. 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

    1.通过Query  post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...

  3. 转:NGINX 基于nginx_upstream_check_module-master 健康检测及平滑升级

    https://www.cnblogs.com/linxizhifeng/p/7075325.html linux的nginx下安装tengine的nginx_upstream_check_modul ...

  4. 关于pandas增加行时,索引名称的一些问题

    学习pandas两天了,关于这个增加行的问题一直困扰着我,测试了几个代码,终于搞通了一点(昨天是因为代码敲错了...) 直接上代码: dates = pd.date_range(',periods=6 ...

  5. Day2:接着思考和可能的策划

    今天早上闹钟还没响呢,老婆就把我叫醒了~说有规律宫缩了! 7点到8点记录了一个小时,宫缩差不多5~6分钟一次! 赶紧收拾东西上医院!正好今天是40周的产检,今天还是预产期! 这孩子终于肯出来了! 结果 ...

  6. 51nod 1441:士兵的数字游戏

    1441 士兵的数字游戏 题目来源: CodeForces 基准时间限制:4 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  取消关注 两个士兵正在玩一个游戏,游戏开始的时 ...

  7. HiBench成长笔记——(7) 阅读《The HiBench Benchmark Suite: Characterization of the MapReduce-Based Data Analysis》

    <The HiBench Benchmark Suite: Characterization of the MapReduce-Based Data Analysis>内容精选 We th ...

  8. springCloud 之 Eureka服务治理

    服务治理是微服务架构中最核心和基础的模块 首先我们创建一个springCloud eureka service的springboot 工程,该工程提供一个服务中心,用来注册服务,第二个工程是clien ...

  9. C#知识点回顾随笔目录导航

    此随笔只是春节期间回顾知识点,阅读<<C#学习笔记>>记录(2019-2-4至2019...); 使用有道云笔记记录可能会有些排版问题 思维导图预览(使用的有道云,无法截取完整 ...

  10. iPhone Safari下iframe不显示滚动条无法滚动的解决方法。iframe的坑!

    <div class="dataTables_wrapper" style="-webkit-overflow-scrolling:touch;overflow:a ...