每天一点点之vue框架开发 - vue坑-input 的checked渲染问题
选中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渲染问题的更多相关文章
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- 每天一点点之vue框架开发 - vue组件之间传值(父向子传值)
路由文件 { path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/pr ...
- 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数
import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...
- 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
- 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...
- 每天一点点之vue框架开发 - vue-router路由在循环中携带参数
场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...
随机推荐
- 微信二次分享的JSSDK的调用
网页端微信的二次分享如果不调用分享的SDK,分享之后就不会带有标题.描述 .缩略图 微信分享SDK调用 引入 <script src="//res.wx.qq.com/open/js/ ...
- H5禁止底部横向滚动条,使一个元素居中
1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...
- centos7 bond双网卡
[root@pay network-scripts]# cat ifcfg-bond0 |grep -v \#TYPE="Ethernet"PROXY_METHOD="n ...
- 「Luogu2264」情书
传送门 Luogu 解题思路 字符串模拟SB题,STL随便搞. 详情见代码. 细节注意事项 STL总得会吧. 参考代码 #include <algorithm> #include < ...
- 「CF55D」Beautiful numbers
传送门 Luogu 解题思路 毒瘤数位DP,发现一个前缀我们只需要记录它对 \(\operatorname{lcm}(1,2,3,\cdots,9)=2520\) 取模的值即可,所以我们在 DP 时记 ...
- 吴裕雄--天生自然JAVA数据库编程:使用JDBC连接ORACLE数据库
DROP TABLE person ; DROP SEQUENCE myseq ; CREATE SEQUENCE myseq ; CREATE TABLE person ( id INT PRIMA ...
- NO23 Linux正则表达式结合三剑客企业级实践--取IP
企业实践: 一.取IP的方法(用三剑客): grep: awk: sed:虽有三种,但是思路是一样的,用到正则有些表达细节不一样而已. 分析: sed***: 课堂试题: |sed -nr 's#^. ...
- 宏碁发布两款全A平台笔记本:良心价
导读 8月3日消息,在全球数码互动娱乐盛会ChinaJoy上,宏碁推出全新两款全A平台笔记本——暗影骑士4 锐龙版酷冷游戏本和蜂鸟Swift3锐龙版金属轻薄本. 此次发布的宏碁暗影骑士4 锐龙版笔记本 ...
- 洛谷 P2375 [NOI2014]动物园
题目传送门 解题思路: 其实对于一个sum[i],其值就等于sum[next[i]] + sum[next[next[i]]] + ... + 1,然后我们可以记忆化,然后题目里又有一个限制,就是前后 ...
- Scala 线性化规则和 super 操作
如果一个类有多个父类,且父类的有相同的函数 f,在子类和父类中调用 super.f 都是按从右到左的调用函数的顺序. 这个规则名为:Linearization Rules 如下的代码 trait Ba ...