深入解析Vue.js中v-bind v-model的使用和区别
2023-09-11 14:16:54 时间
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 特性
**结语**
感谢您的观看,如有不足之处,欢迎批评指正。
原文地址:
相关文章
- vue环境下安装npm,启动npm 修改js,css样式
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue - utils.js
- 【Vue】v-cloak 的用法
- 【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- webpack5打包vue项目
- (30)打鸡儿教你Vue.js
- Vue 国际化之 vue-i18n 的使用
- 如何理解vue.js组件的作用域是独立的
- js 保留两位小数,Js四舍五入,JavaScript Math四舍五入
- 02-vue基础-Vue常用特性
- Vue---this.$route和this.$router这两个对象--都需要在router.js 中配置
- vue.js格式使用vant-页面引入3
- Electron-vue实战-每日清单---02Electron-vue的目录详解
- 【Laya + TS + JS】SheetJS(js-xlsx)前端生成Excel表格
- Vue-cli 4在vue.config.js中配置别名
- vue基本使用--refs获取组件或元素
- Vue.js 样式绑定(1)
- VUE 报错 Error in mounted hook
- VUE 报错