每天一点点之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循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...
随机推荐
- Java的equals方法实现及其细节
判断两个对象是否等价,是OOP编程中常见的需求(下面围绕Java来进行阐述). 考虑这样几种情况:通过某个特征值来判断两个对象是否“等价”,当这两个对象等价时,判断结果为true,否则结果为false ...
- centos8 安装mysql 8.0
本文参照:https://blog.csdn.net/qq_43232506/article/details/102816659 • 安装mysql及依赖 dnf install @mysql • ...
- 【STM32H7教程】第53章 STM32H7的LTDC应用之汉字小字库和全字库制作
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第53章 STM32H7的LTDC应用之汉字小字库 ...
- CH8 课后习题
8.1和8.2 #include <iostream> using namespace std; istream& f(istream& in) { int v; in & ...
- Java服务端对Cookie的简单操作
Java服务端对Cookie的简单操作 时间 2016-04-07 10:39:44 极客头条 原文 http://www.cuiyongzhi.com/index.php/post/15.html ...
- Regression 回归——多项式回归
回归是指拟合函数的模型.图像等.与分类不同,回归一般是在函数可微的情况下进行的.因为分类它就那么几类,如果把类别看做函数值的话,分类的函数值是离散的,而回归的函数值通常是连续且可微的.所以回归可以通过 ...
- HiBench成长笔记——(11) 分析源码run.sh
#!/bin/bash # Licensed to the Apache Software Foundation (ASF) under one or more # contributor licen ...
- Oralce给字段追加字符,以及oracle 给字段替换字符
追加字符 update table_name t set t.DIST_NAME = t.DIST_NAME || '市' where PROD_NAME='爱立信' table_name :表名 ...
- epoll源码分析(基于linux-5.1.4)
API epoll提供给用户进程的接口有如下四个,本文基于linux-5.1.4源码详细分析每个API具体做了啥工作,通过UML时序图理清内核内部的函数调用关系. int epoll_create1( ...
- android中的简单animation(一)shake
1.shake animation_1.xml: <?xml version="1.0" encoding="utf-8"?> <Linear ...