选中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. 六种方式实现hibernate查询,及IDE推荐

      这些天过的好乱,也许是因为考完试了,心里有些松懈吧.也许是最近发生的事对我有些触动吧.感觉自己都已经不懂自己了.面对一些人的教导,我很感激.因为很多话都对我有非常大的帮助和启发,也让我除了做技术, ...

  2. 十五 JSP开发模式&MVC设计模式

    JSP开发模式: JavaBean + JSP  : 缺点:页面代码过多,不利于维护,JSP页面代码变得臃肿 Servlet + JavaBean + JSP :MVC设计模式 M:model   模 ...

  3. gitlab clone或者pull 仓库

    今天在学git操作,想从gitlab上面clone下来并操作一下,但是一直出现 没有权限的错误,一直搞不定 后来才知道,需要ssh密钥才可以 ssh-keygen -t rsa -C "ex ...

  4. 初学微信小程序——配置问题(1)

    一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com  点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...

  5. Windows驱动开发-r3和r0通信

    用户部分代码: int main() { HANDLE hDevice = CreateFile(L, NULL, OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL, NULL ...

  6. 跟 Task 有关的 Intent对象中设置的Flag

    FLAG_ACTIVITY_BROUGHT_TO_FRONT      这个标志一般不是由程序代码设置的,如在launchMode中设置singleTask模式时系统帮你设定. FLAG_ACTIVI ...

  7. centos7下安装maven

    步骤1:在home目录下解压apache-maven-3.5.0-bin.tar.gz安装包 [root@model ~]# -bin.tar.gz 步骤2:创建/maven目录并将解压后的文件夹移至 ...

  8. Yarn的资源调优

    一.概述 每个job提交到yarn上执行时,都会分配Container容器去运行,而这个容器需要资源才能运行,这个资源就是Cpu和内存. 1.CPU资源调度 目前的CPU被Yarn划分为虚拟CPU,这 ...

  9. 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员

    提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...

  10. .NET配置问题

    Ext.NET MVC 配置问题总结       随着VS版本和.NET MVC版本.EF的版本的不断更新,虽然很多功能随着版本的提升而更完善,但对于旧版本开发的软件就有点悲催了,或许很多开发者都遇到 ...