zoukankan      html  css  js  c++  java
  • 使用vue如何默认选中单选框

    使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新。
    那么,今天先聊聊单选框的使用。一般我们使用单选框,会这么写:

    //HTML
    <input type="radio" name="radios" value="1" checked><label>one</label>
    <br>
    <input type="radio" name="radios" value="2"><label>two</label>
    <br>
    <input type="radio" name="radios" value="2"><label>three</label>


    有”checked”属性的单选框会默认选中。

    但在vue里这是无效的,因为它会跟具体的参数值绑定。(后来看到vue的官网教程,确实写了这么一段:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。)

    //HTML
    <input type="radio" name="radios" value="1" v-model="param"><label>one</label>
    <br>
    <input type="radio" name="radios" value="2" v-model="param"><label>two</label>
    <br>
    <input type="radio" name="radios" value="3" v-model="param"><label>three</label>
    //JS
    export default{
        data(){
            return{
                param:'1' //设置默认值为1,即设置第一个单选框为选中状态
            }
        }
    }

    参考博客:
    Vue.js学习笔记——表单控件实践
    表单输入绑定——Vue.js
    ---------------------
    作者:sone_yoonyul
    来源:CSDN
    原文:https://blog.csdn.net/sone_yoonyul/article/details/78421717?utm_source=copy
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    STL目录
    Hola!
    SWPUCTF 2019总结以及部分WP
    SQL手工注入基础篇
    JDK11,JDK12没有JRE的解决方法
    FJUT2019暑假周赛三部分题解
    FJUT2019暑假周赛一题解
    随笔1
    关于针对本校教务系统漏洞的一次信息检索
    KMP算法讲解
  • 原文地址:https://www.cnblogs.com/rxbook/p/9773483.html
Copyright © 2011-2022 走看看