黑马vue---14、v-model双向绑定
黑马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双向绑定的更多相关文章
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- Vue - 如何实现一个双向绑定
JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile 解析指令 和 observe ...
- vue 结合localStorage 来双向绑定数据
结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue.js 3.x 双向绑定原理
什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...
- 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题
问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...
- vue model双向绑定
view <div id='demo' class="container"> <input type="text" v-model='name ...
随机推荐
- 非JAVA WEB项目提供Http接口调用实现
package com.monitor.app.utils; import com.alibaba.fastjson.JSON; import com.google.gson.Gson; import ...
- dubbo和zookeeper结合使用
1.相关依赖引入 阿里的dubbo包含了spring相关内容,引入依赖时,需要排除,使用我们自己项目中的spring依赖 <!-- start..............dubbo....... ...
- QQ空间添加背景音乐
QQ空间背景音乐方式 1.QQ音乐添加背景音乐一种是开通绿砖[有矿的忽略此条]2.QQ空间添加网络音乐的方法步骤:1.首先,需要先下载好想要音乐作为QQ空间背景音乐的歌曲文件(建议为MP3格式)[我这 ...
- python文件操作：文件处理与操作模式
一,文件处理的模式基本概念 #coding:utf-8 # 一: 文件处理的三个步骤 # 1. 打开文件拿到文件对象(文件对象====>操作系统打开文件====>硬盘) # f=open( ...
- ProgressDialog 进度条的初步认识
public class MainActivity extends Activity implements View.OnClickListener{ private ProgressBar prog ...
- 使用 Eclipse 构建的时候会出现 run as 中没有 maven package 选项
注:该方法来自我学习时别人分享的出现问题的解决方法,并没有亲自测试,仅供参考 是因为建的是普通 java 工程,需要把它转换成 maven project. 1.右键工程--maven--Disabl ...
- 【icpc2019网络赛南昌站】Yukino With Subinterval
傻b错误调一天系列 原题: 大意:给你一个数列a,字词两种操作: 1.把c[l]改成r 2.询问在区间[l,r]中,有多少个极大子区间满足子区间里的数全部一样,且在[x,y]范围内 (对于满足条件的区 ...
- Summer training #11
A:水 #include <bits/stdc++.h> #include <cstring> #include <iostream> #include <a ...
- 接口数据转json格式
接口数据转json格式 function tojson($result, $callback = null){ header('Content-Type:text/html; charset=utf- ...
- linux TAILQ_ENTRY
#include <sys/queue.h> TAILQ_ENTRY 队列 http://www.360doc.com/content/15/1222/14/29292169_522271 ...