选中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. (2)LoraWAN:Lora LMIC library 编程模型及API

    二.LMIC library 编程模型及API LMiC库可以通过一组API函数(API functions),运行时函数(run-time functions),回调函数(callback func ...

  2. Outer()函数

    转载:https://bbs.pinggu.org/thread-7078237-1-1.html R语言中的outer()函数,名为内积函数,但是他执行的功能并不是解析几何中的内积.那该函数到底发挥 ...

  3. JDBC--利用反射及JDBC元数据编写通用的查询方法

    1.JDBC元数据(ResuleSetMetaData):描述ResultSet的元数据对象,可以从中获取到结果集中的列数和列名等: --使用ResultSet类的getMetaData()方法获得R ...

  4. Time Series_1_BRKA Case

    Berkshire Hathaway (The most expensive stock ever in the world) 1.1 Download data require(quantmod) ...

  5. Mac如何升级自带的vim

    brew install vim --with-lua --with-override-system-vi brew install macvim --with-lua --with-override ...

  6. CSS-fontface

    @font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font> ...

  7. mongdb 4.x admin密码忘记,如何 重建admin用户

    在mongo db中,或mongo db cluser中,如果admin密码忘记了,必须按下面的步骤来做.思路为注释掉security认证部分,重启mongo server, 重建admin用户,再打 ...

  8. 图像检索:CEDD(Color and Edge Directivity Descriptor)算法 颜色和边缘的方向性描述符

    颜色和边缘的方向性描述符(Color and Edge Directivity Descriptor,CEDD) 本文节选自论文<Android手机上图像分类技术的研究>. CEDD具有抽 ...

  9. Codestorm:Game with a Boomerang

    题目连接:https://www.hackerrank.com/contests/codestorm/challenges/game-with-a-boomerang 上一篇博客不知怎么复制过来题目, ...

  10. C#中使用设置(Settings.settings) Properties.Settings.Default .(配置文件相当重要)

    C#中使用设置(Settings.settings) Properties.Settings.Default . 2016年08月04日 15:02:43 zxd9790902 阅读数:10664更多 ...