选中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. 三、多线程基础-自旋_AQS_多线程上下文

    1. 自旋理解    很多synchronized里面的代码只是一些很简单的代码,执行时间非常快,此时等待的线程都加锁可能是一种不太值得的操作,因为线程阻塞涉及到用户态和内核态切换的问题.既然sync ...

  2. Day2-H-非常可乐-HDU1495

    大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多.但see ...

  3. Random Process Modeling_1

    1. Bertrand Triangle r=1; %circle radius x0=0; y0=0; %centre of circle %points for circle t=linspace ...

  4. jmeter学习笔记---循环控制器计数器函数助手

    循环控制器与计数器,以及函数助手需要配合使用,实现循环 循环控制器的“循环次数”输入最大循环次数的参数 计数器:除输入最大值外,还需要输入“引用名称”,供后续请求使用 请求中,如果需要实现循环,需要借 ...

  5. Lesson 47 The great escape

    What is one of the features of modern camping where nationality is concerned? Economy is one powerfu ...

  6. python机器学习基本概念快速入门

    //2019.08.01机器学习基础入门1-21.半监督学习的数据特征在于其数据集一部分带有一定的"标记"和或者"答案",而另一部分数据没有特定的标记,而更常见 ...

  7. 《ES6标准入门》(阮一峰)--12.Symbol

    1.概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种 ...

  8. UVA 12510/CSU 1119 Collecting Coins DFS

    前年的省赛题,难点在于这个石头的推移不太好处理 后来还是看了阳神当年的省赛总结,发现这个石头这里,因为就四五个子,就暴力dfs处理即可.先把石头当做普通障碍,进行一遍全图的dfs或者bfs,找到可以找 ...

  9. SignalTap II Logic Analyzer 无法观测到信号?

    在Quartus SignalTap 工具中加入信号,发现加入的信号变成红色,如图所示的data_slave[7..0]: 这样的信号是没有办法观测的,不会根据SignalTap 的Clock和Tri ...

  10. DFS技巧 折半搜索

    #include<iostream> #include<string> #include<cmath> #include<cstring> #inclu ...