黑马vue---14、v-model双向绑定

一、总结

一句话总结:

1、v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
2、v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定

1、v-model的使用限制?

v-model 只能运用在 表单元素中:input(radio, text, address, email....)   select    checkbox   textarea

2、v-model使用实例?

input type="text" style="width:100%;" v-model="msg"

二、v-model双向绑定

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></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" style="width:100%;" v-model="msg">
</div> <script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
},
methods: {
}
});
</script>
</body> </html>
 

黑马vue---14、v-model双向绑定的更多相关文章

  1. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  2. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  3. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  4. Vue - 如何实现一个双向绑定

    JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile  解析指令 和 observe ...

  5. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  6. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  7. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  8. Vue.js 3.x 双向绑定原理

    什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...

  9. 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题

    问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...

  10. vue model双向绑定

    view <div id='demo' class="container"> <input type="text" v-model='name ...

随机推荐

  1. Java学习笔记【四、类、对象、接口】

    编程语言的发展 机器语言 过程语言 面向对象编程--封装.继承.多态 关键字 extends implements override overload super this static abstra ...

  2. MySQL计算两个日期相差的天数、月数、年数

    MySQL自带的日期函数TIMESTAMPDIFF计算两个日期相差的秒数.分钟数.小时数.天数.周数.季度数.月数.年数,当前日期增加或者减少一天.一周等等. SELECT TIMESTAMPDIFF ...

  3. SQL 多表查询展示

    ########################多表########################SELECT COUNT(*) FROM MEMBER1 A; 查询出来的结果为43行数据: SEL ...

  4. SSH安装配置

    一.环境准备 二.SSH配置 1.root用户进入home目录,确实有无隐藏文件夹 .ssh cd ~ ls -lrta 2.有,则跳过本步骤:没有,执行如下命令 ##根据提示输入当前用户密码 ssh ...

  5. 身份证js正则

    /* 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至右依次为:六位数字地址码,八位 ...

  6. spring RestTemplate 出现 NoHttpResponseException 和 ConnectionTimeoutException

    使用 httpclient.4.5.6 springboot 2.0.8RELEASE RetryExec.java CloseableHttpResponse execute() try { ret ...

  7. Oracle之:Function :getdate()

    create or replace function getdate(sp_date varchar) return date is Result date; begin if LENGTH(sp_d ...

  8. hdu 6049 Sdjpx Is Happy

    题: OwO http://acm.hdu.edu.cn/showproblem.php?pid=6049 (2017 Multi-University Training Contest - Team ...

  9. 【Android-NetWork】 判断是否连接网络,判断网络连接方式

    如何判断Android是否连接网络? Java代码: ConnectivityManager conn = (ConnectivityManager) getSystemService(Activit ...

  10. Jenkins-邮件模板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...