深入解析Vue.js中v-bind v-model的使用和区别
2024-08-31 23:23:29
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据
**最基础的就是实现一个联动的效果**
<body>
<div class="app">
<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new Vue({
el:'.app'
})
</script>
**checkbox**
<body>
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
**v-bind**
有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性
**结语**
感谢您的观看,如有不足之处,欢迎批评指正。
原文地址:
最新文章
- 通读AFN③--HTTPS访问控制(AFSecurityPolicy),Reachability(AFNetworkReachabilityManager)
- webpack 教程 那些事儿01-webpack是什么
- VirtualBox centos 6.5 minimal 开启网络
- oracle中Blob和Clob类型的区别
- 自定义view(使用EditTetx实现记事本特效)
- 关系数据库&;&;NoSQL数据库
- How to use Android Activity&#39;s finish(), onDestory() and System.exit(0) methods
- Linux关闭防火墙、SELinux
- PHPUnit初试
- 小程序之发起请求 wx.request(object)的坑
- Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法
- fast-ai lesson1 错误处理(CNN创建)
- django 创建admin用户名跟密码
- python之序列化模块、双下方法(dict call new del len eq hash)和单例模式
- 读取gzmt.csv文件,计算均值及概率
- EntityFrameworkCore中的实体状态
- 解决配置Windows Update失败,还原更改问题
- WIN7 环境下搭建 PHP7(64 位)操作步骤
- 为什么和什么是 DevOps?
- java学习笔记23(Set接口)