（11）打鸡儿教你Vue.js
2024-09-22 12:41:06
表单
v-model 指令在表单控件元素上创建双向数据绑定
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="da" value="da" v-model="checkedNames">
<label for="da">da</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>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
单选按钮：
<div id="app">
<input type="radio" id="da" value="da" v-model="picked">
<label for="da">da</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'da'
}
})
</script>
<div id="app">
<select v-model="selected" name="com">
<option value="">选择一个网站</option>
<option value="www.da.com">da</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
修饰符
.lazy转变为在 change 事件中同步
<input v-model.lazy="msg" >
.number
<input v-model.number="age" type="number">
.trim
<input v-model.trim="msg">
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
最新文章
- Qt5 开发 iOS 应用之访问 SQLite 数据库
- wikioi 1166 矩阵取数游戏
- 固定IP 正常访问谷歌
- Android--UI
- Redis介绍及常用命令
- Crystal Report在.net中的两种显示方式
- ListView的setSelectionFromTop()方法与setSelection()方法的联系
- Maven Dependency Scope用法
- details标签和summary标签
- Android切换页面效果的实现一：WebView+ViewFlipper
- linux截取字符串的多种方法
- 安装JDK，配置环境变量有感
- An internal error occurred during: "Launching New_configuration"
- MySQL数据库基础（三）（操作数据表中的记录）
- Centos6.7下面配置vim及其插件
- Java 基础类型 默认值
- Python package和module
- 解决kali linux 开启ssh服务后连接不上的问题
- istringstream、ostringstream、stringstream 类介绍 和 stringstream类 clear函数的真正用途
- P678-vect2.cpp