博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue.js学习系列(三十八)-- Vue.js表单 (二)
阅读量:6146 次
发布时间:2019-06-21

本文共 954 字,大约阅读时间需要 3 分钟。

hot3.png

2.复选框

如果是一个为逻辑值,如果是多个则绑定到同一个数组:

下面我们来演示一下复选框实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<p>单个复选框:</p>

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{

{checked}}</label>

<p>多个复选框:</p>

<input type="checkbox" id="tianmao" value="tianmao" v-model="checkedNames">

    <label for="tianmao">tianmao</label>

    <input type="checkbox" id="google" value="Google" v-model="checkedNames">

    <label for="google">Google</label>

    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

    <label for="taobao">taobao</label>

    <br>

    <span>选择的值为:{

{checkedNames}}</span>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

checked:false,

checkedNames:[]

}

})

</script>

</body>

</html>

运行结果:

当选中单个,此时false的值就会变成true。当勾选多个复选框的内容,复选框的文本值就会以字符串的形式显示在选择的值为后面的数组中。

006zipb5zy79EmEJSVSb4&690 

转载于:https://my.oschina.net/u/2971691/blog/863035

你可能感兴趣的文章
JQuery radio单选框应用
查看>>
MySql操作
查看>>
python 解析 XML文件
查看>>
MySQL 文件导入出错
查看>>
HDU2502 月之数(解法三)
查看>>
栈的压入、弹出序列 (剑指offer)
查看>>
java相关
查看>>
由一个异常开始思考springmvc参数解析
查看>>
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案...
查看>>
获取本机外网ip和内网ip
查看>>
sql优化
查看>>
hammer.js移动端手势库
查看>>
hightcharts 3d 堆积图下钻
查看>>
201621123018《Java程序设计》第1周学习报告
查看>>
ArrayList 源码分析
查看>>
Java 里如何实现线程间通信(转载)
查看>>
hadoop2集群中的datanode启动以后自动关闭的问题
查看>>
ancms v2.3语言介绍
查看>>
使用JavaMail发送邮件
查看>>
HTTP,HTTPS,HTTP2笔记
查看>>