第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
2024-08-31 23:06:32
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<h4>{{msg}}</h4>
<!-- v-bind只能实现数据的单向绑定,从M 自动绑定到 V,无法实现数据的双向绑定 -->
<!-- <input type="text" v-bind:value="msg" style="width: 100%"> --> <!-- 使用 v-model 指令,可以实现 表单元素 和 Model 中数据的双向数据绑定 -->
<!-- 注意:v-model 只能运用在 表单元素中 -->
<!-- 常见的表单元素: input(radio,text,address,email......) select checkbox textarea -->
<input type="text" value="msg" style="width: 100%;" v-model="msg">
</div> <script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:'大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
},
methods:{}
});
</script>
</body>
</html>
最新文章
- js+html+jquery 个人笔记
- border-style 属性
- uboot和内核波特率不同
- openstack api
- SqlBulkCopy使用心得 (大量数据导入)
- python functools.wraps装饰器模块
- 使用Python写一个贪吃蛇
- 【Alpha】第一次项目冲刺
- TP-LINK | TL-WR842N设置无线转有线
- Linux shell脚本中shift的用法说明
- 使用JavaScript制作页面效果3
- How to enable C development in a Windows 10 development environment VM
- BZOJ4779: [Usaco2017 Open]Bovine Genomics
- UML入门[转]
- openwrt 添加 802.1x客户端njit
- VS2017 配置freeglut3.0.0
- php防sql注入过滤代码
- Nginx(八)-- 负载均衡
- 美国部分科技公司创始及IPO信息
- WebSphere和IHS的安装