选中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. day16-Python运维开发基础(os / os.path / shutil模块)

    1. OS模块与shutil模块 os :新建/删除shutil: 复制/移动 # ### os模块 与 shutil模块 """ os 新建/删除 shutil 复制/ ...

  2. window.onload 方法脚本

    //首先 创建一个函数 function windowOload(func){ var onLoad = window.onload; //如果window.onload没有绑定任何函数 则绑定该函数 ...

  3. [经验] Cocos Creator使用笔记 --- 调用不同脚本下的函数

    因为 JavaScript 不同于 Java, 想要调用不同文件的函数的话不能直接 ClassName object = new ClassName(); object.function(param) ...

  4. AJAX封装数据处理简单操作

    数据的封装处理主要展现在JS中,在页面里面引入封装的JS, "js/ajax.js" 简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括typ ...

  5. LCS(Longest Common Subsequence)最长公共子序列

    最长公共子序列(LCS)是一个在一个序列集合中(通常为两个序列)用来查找所有序列中最长子序列的问题.这与查找最长公共子串的问题不同的地方是:子序列不需要在原序列中占用连续的位置 .最长公共子序列问题是 ...

  6. IOS TableView 用法

    1.在视图上创建TableView( 拖控件),为ViewController创建UITableView属性(链接至TableView)和NSArray属性(存储数据) ViewController. ...

  7. css解决字段不换行

    1.自动换行 <div style="widht:100%;height:100%;word-wrap: break-word">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 ...

  8. Job 失败了怎么办?【转】

    上一节讨论了 Job 执行成功的情况,如果失败了会怎么样呢? 修改 myjob.yml,故意引入一个错误: 先删除之前的 Job: 如果将 restartPolicy 设置为 OnFailure 会怎 ...

  9. HiBench成长笔记——(6) HiBench测试结果分析

    Scan Join Aggregation Scan Join Aggregation Scan Join Aggregation Scan Join Aggregation Scan Join Ag ...

  10. sslopen RSA加解密

    一.  原理概念 OpenSSL定义: OpenSSL是为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SSL协议,并提供了丰富的应用程序供测试或其 ...