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的使 ...
随机推荐
- AI工程师跑路了-怎么办？
从雪山飞狐到百年孤独 百无聊赖中翻开了又一本金庸的小说<雪山飞狐>,江湖侠气,快意恩仇瞬间跃然纸上,唯有最后胡斐那一刀才让读者回到了现实.之前刚读了<明朝那些事儿>,最后重 ...
- C#实现MCP Client 与 LLM 连接，抓取网页内容功能！
前面的课程,我们已经用C#实现了,自己的MCP Client. 下面我们一起来实现,MCP Client与LLM 对接. 一.添加依赖库 目前来说,绝大部分的大模型的API,都是遵循OpenAI的接口 ...
- Django的Model类
1.model 用来和数据交互的(读取和传入数据) 2.orm Object Relational Mapping对象关系映射,python中的model对象和数据库中的表做映射 3.重要概念 3.1 ...
- 现代Web安全实践：基于Token与Refresh Token的单点登录(SSO)实现
在数字化转型加速的今天,单点登录(SSO)已成为企业身份管理的核心基础设施.袋鼠云UED团队在过去几年中,为金融.政务.医疗等领域的大型系统构建SSO解决方案.本文将分享基于Token的标准SSO ...
- vue导出Excel表格各种样式
https://www.cnblogs.com/Awchao/p/14143385.html
- Java学习篇（二）—— C++和Java的区别之程序内存分布
上一篇介绍了C++和Java编译的区别和Java独有的网络编程,线程管理.这一篇主要介绍一下两者在程序运行时的内存空间. 内存分布 项目 C++ 程序 Java 程序(使用 JVM) 编译结果 直接生 ...
- XML文件头命名空间——Spring
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Spring 概述和依赖注入(DI)
Spring概述 Spring框架是一个轻量级的企业级开发的一站式解决方案 Spring框架主要提供Ioc容器.AOP.数据访问.WEB开发.消息.测试等相关技术的支持 每一个被Spring管理的Ja ...
- Oracle中字符型级处理方法
字符型简介 固定长度字符串-char(n) n代表字符串的长度,当实际长度不足时,利用空格在右端补齐,n的最大值不能大于2000.所以只要是固定长度的字符串,他的length(值)的长度总为n var ...
- 删除emp_no重复的记录，只保留最小的id对应的记录。
简介 删除emp_no重复的记录,只保留最小的id对应的记录. DELETE FROM titles_test where id not in( select * from( select MIN(i ...