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

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

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

不多说了,直接上代码

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

js部分

  1. data() {
  2. return {
  3. product_test_index_selected: 0, // radio默认选择第一个
  4. };
  5. },
  6.  
  7. onRadioChange(index) {
  8. this.product_test_show_index_selected = index;
  9. },

想实现每次点击之后选项默认选择为第一个,需要在使用完 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. Jenkins——持续集成(CI)

    Jenkins介绍Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins功能包括:1. ...

  2. 【随缘更(gu)】牛客D4简要思路(没有题解)

    T1 当然不能枚举每个区间,于是我们考虑算贡献. 对于每个位置i,我们计算其作为区间内第一个出现ai的位置的区间总数,则有ans=sigma( i - last[i] ) * ( n - i + 1 ...

  3. Jquery属性操作、添加类

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

  4. 视频编解码 基本概念:GOP

    前言 产品开发要求添加视频剪辑功能,翻阅有关的文档,查到了GOP(group of pictures)这个概念. 解析 GOP说白了就是两个I帧之间的间隔.比较说GOP为120,如果是720p60的话 ...

  5. hadoop-mapreduce的官方示例的测试执行方法

    1.根据给出的精度参数计算 pi : hadoop jar /export/servers/hadoop-2.6.0-cdh5.14.0/share/hadoop/mapreduce/hadoop-m ...

  6. ETC系列产品非接触式读卡器方案:SI522

    随着科技的不断发展,出行上高速这是非常寻常的事.但是在很多节假日高峰时期,在高速路口塞车缴费给很多车主造成很大的烦心.为了解决这一系列的问题,科技发明了ETC这种便捷式缴费技术,让车主们顺畅通过高速路 ...

  7. 牛客周赛11TG B-弹钢琴

    链接:https://ac.nowcoder.com/acm/contest/941/B来源:牛客网 题目描述 春希想听和纱弹钢琴! 为了阻止异变的发生,Pi将钢琴魔改了 钢琴上有 N 个键,每个键有 ...

  8. SDOI 种田记

    day3: 今天早上来重新看了一下,IQ--,智障的感觉2333.弱势围观了一发众神奔,发现好多人都A了第三题,然而回想起自己考试的时候傻傻的码第二题的错误代码,真的是感觉mdzz. 不想吐槽了,记得 ...

  9. 序列号导出到csv的实现

    //导出到csv public function exportCsvByIds($ids){ header("Content-type:text/html;charset=utf-8&quo ...

  10. ZOJ 3802 Easy 2048 Again 状态DP

    zoj 上次的月赛题,相当牛的题目啊,根本想不到是状态压缩好吧 有个预先要知道的,即500个16相加那也是不会超过8192,即,合并最多合并到4096,只有2的12次方 所以用状态压缩表示前面有的序列 ...