Vue2.0的v-model指令
Vue2.0的v-model指令
v-model="属性" 写在标签中上，相当于在一个标签上，同时写了 :value='属性值' @iinput='handler' ，而handler对应的函数如果没有声明，就是给该属性值赋值的setter函数
代码一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>总数：{{total}}</p>
<!-- 在自定义组件上使用v-model指令 -->
<my-component v-model="total"></my-component>
</div>
<div id="app1">
<p>总数：{{total}}</p>
<!--第一种写法实际就是这种写法 -->
<my-component @input="handleGetTotal"></my-component>
</div> <script>
Vue.component('my-component',{
template:'<button @click="handleClick">+1</button>',
data:function(){
return {
counter:0
}
},
methods: {
handleClick:function(){
this.counter++;
this.$emit('input',this.counter);
}
}
});
Vue.component('my-component1',{
template:'<button @click="handleClick">+1</button>',
data:function(){
return {
counter:0
}
},
methods: {
handleClick:function(){
this.counter++;
this.$emit('input',this.counter);
}
}
}); let app=new Vue({
el:"#app",
data:{
total:0
}
});
let app1=new Vue({
el:"#app1",
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total;
}
}
}); </script>
</body>
</html>
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>总数：{{total}}</p>
<!-- 在自定义组件上使用v-model指令 -->
<my-component v-model="total"></my-component>
</div>
<div id="app1">
<p>总数：{{total}}</p>
<!--第一种写法实际就是这种写法 -->
<my-component @input="handleGetTotal"></my-component>
</div> <script> Vue.component('my-component2',{
props:['value'],//?
// 接收一个value属性，在有新的value时触发input事件
template:'<input :value="value" @input="updateValue">',
methods: {
updateValue:function(event){
this.$emit('input',event.target.value);
}
}
});
Vue.component('my-component3',{
props:['value'],//?
// 接收一个value属性，在有新的value时触发input事件
template:'<input :value="value" @input="updateValue">',
methods: {
updateValue:function(event){
this.$emit('input',event.target.value);
}
}
}); let app2=new Vue({
el:"#app2",
data:{
total:0
},
methods:{
handleReduce:function(total){
this.total--;
}
}
});
let app3=new Vue({
el:"#app3",
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total;
},
handleReduce:function(total){
this.total--;
}
}
});
</script>
</body>
</html>
Vue2.0的v-model指令的更多相关文章
- Vue2.0中的系统指令
v-on注册事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue2.0 【第一季】第7节 v-bind指令
目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...
- Vue2.0 【第一季】第6节 v-model指令
目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...
- Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- Vue2.0 【第一季】第2节 v-if v-else v-show 指令
目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...
随机推荐
- 如何正确理解IGBT参数
文档下载链接:https://cnblogs-img.oss-cn-hangzhou.aliyuncs.com/docs/正确理解IGBT模块规格书参数.pdf
- 边学边练，福利无限 —— OceanBase DBA 实战营（第一季）火热进行中！
首先为大家推荐这个 OceanBase 开源负责人老纪的公众号 "老纪的技术唠嗑局",会持续更新和 OceanBase 相关的各种技术内容.欢迎感兴趣的朋友们关注! 活动背景 20 ...
- Java 内存模型与 Happens-Before 关系深度解析
在 Java 并发编程中,Java 内存模型(Java Memory Model, JMM)与 Happens-Before 关系是理解多线程数据可见性和有序性的核心理论.本文从 JMM 的抽象模型出 ...
- Potree 004 点云点大小形状设置
点云数据就是靠海量的点显示来模拟真实世界的.点大小设置就比较重要,例如如果数据稀疏,点显示的时候,可以设置稍微大一些.如果点数据比较密集,则可以显示小一些. 在Potree中,点云定义为PointCl ...
- 什么是CAE软件？哪个CAE软件好用？
CAE,全称Computer Aided Engineering,是指在工程领域结合计算机技术进行工程设计.分析.优化以及模拟仿真的应用.随着科技的发展,CAE技术在航空.汽车.电子.机械等领域越来越 ...
- Java学习篇（二）—— C++和Java的区别之程序内存分布
上一篇介绍了C++和Java编译的区别和Java独有的网络编程,线程管理.这一篇主要介绍一下两者在程序运行时的内存空间. 内存分布 项目 C++ 程序 Java 程序(使用 JVM) 编译结果 直接生 ...
- zip文件下载
记录一下zip压缩文件下载 下载的内容有些大 ,通过变成.zip的文件的话会小很多,response是HttpServletResponse,记得关闭流 //文件压缩下载 ZipOutputStrea ...
- poi 酱放过的每日一歌
整理一下 poi 酱放过的每日一歌,大概按照时间排序,如果有喜欢的大家可以参考一下. poi 酱喜欢什么样的歌 基本上从 \(2 \times 2\) 个维度考虑:唱腔(甜度.软度)和歌词(内容.与曲 ...
- Annotation注释详解~
注释: jdk5.0后,Java增加了对元数据的支持.也就是Annotation(注释). 他是是代码中的特殊标记,可以在代码编译,类加载,运行时被读取,并执行相应的处理.这样用Annotation开 ...
- C# WinFomr 组合快捷键
private void 控件名称_KeyDown(object sender, KeyEventArgs e) { //如果只是按了回车,而不是按组合快捷键就执行 if (e.KeyCode == ...