很乱，临时保存，自定义v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>learn1</title>
</head>
<body> <template id="hello">
<h1>{{msg}} {{user}}</h1>
</template> <template id="form">
<div>
<input :value="value" type="text" id="name" v-on:input="onInput">
</div>
</template> <template id='c'>
<input type="checkbox" v-on:change="onChange"/>
</template> <template id="greetings">
<div>
<my-checkbox v-model='f' value="some value" ></my-checkbox>
<h1>{{f}}</h1>
<hr>
//此处v-model=kk,目的是zz子组件将自己的值传递给父组件的hk
//kk=112，是将父组件的112,或者父组件的其他值传递给子组件
//也就是说在自定义模板上定义v-mode目的是向外传递
//kk=112或其他类似属性，目的是向内传递给自己定义的模板的属性
<zz v-model='hk' kk=""></zz>
</div>
</template> <template id="fff" >
<label>
//这里的:checked是input自带属性，不是我们定义的，它接收checkval方法计算的值
//:kk="kk"对应上面的 zz标签里的 kk=112，可以理解将112传递给kk,kk传递给:kk
//这个 checkval是计算属性，将计算结果传递给:checked，这个checkVal作用是，在父组件里使用子组件，在子组件上的v-model上的值传递给子组件
<input type="radio" :checked="checkVal" :kk="kk" @change="update">
{{ modelVal }}
</label>
</template> <div id="app">
<greetings-component></greetings-component>
</div>
<!-- built files will be auto injected -->
</body>
</html>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import router from './router'
//import ElementUI from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css' //import App from './App' Vue.config.productionTip = false
//Vue.use(ElementUI) Vue.component('hello-component', {
template: '#hello',
data: function () {
return {
msg: 'Hello'
}
},
props: ['user']
}); Vue.component('form-component', {
template: '#form',
props: ['value'],
methods: {
onInput: function () {
this.$emit('input', event.target.value)
}
}
}); Vue.component('zz',{
template:'#fff',
model: {
//这里的modlVal ，如果不自己定义，默认是prop:'value'，input类似标签
//将值存进value里，我们声明了ModelVal，就不存进value里，而是存进modelVal里
prop: 'modelVal',
event: 'change'
},
props: {
value: {
type: Boolean,
},
modelVal: {
default: ""
},
label: {
type: String
},kk:{
type:String
}
},
computed: {
checkVal() {
console.log("----------")
console.log(this.modelVal)
console.log(this.kk)
console.log("----------")
console.log( this.modelVal === this.value)
return this.modelVal === this.value
}
},
methods: {
update() {
this.$emit('change', this.checkVal)
}}
}) Vue.component('my-checkbox', {
template:'#c',
model: {
//这里就是hello存储true或者false ，替代false
prop: 'hello',
event: 'change'
},
props: {
hello:Boolean, //这里也要先声明hello，
value: String
},
methods:{
onChange () {
console.log(this.hello)
console.log(this.value)
console.log(event.target.checked)
this.$emit('change',event.target.checked) }
}
}) Vue.component('greetings-component', {
template: '#greetings',
data: function () {
return {
user: 'heroaa',
foo:'hello',
f:true,
world:'world',
hk:"",
modelVal:''
}
},
methods:{
get (v) {
console.log(v)
}
}
}); /* eslint-disable no-new */
new Vue({
el: '#app',
data:{
user:'hero'
}
})
很乱，临时保存，自定义v-model的更多相关文章
- qsettings 保存自定义结构体（QVariant与自定义结构体相互转化）
参考博文:QVariant与自定义数据类型转换的方法. 这里摘取其关键内容: 1.将自定义数据类型使用Q_DECLARE_METATYPE宏进行声明,便于编译器识别. 2.在插入对象的时候,声明QVa ...
- combox使用自定义的model列表中无元素显示
自定义的model(stationModel)中有 name 和point两种属性名. 初始化stationModel Combobox{ textRole: 'name' model:station ...
- Map集合的遍历方式以及TreeMap集合保存自定义对象实现比较的Comparable和Comparator两种方式
Map集合的特点 1.Map集合中保存的都是键值对,键和值是一一对应的 2.一个映射不能包含重复的值 3.每个键最多只能映射到一个值上 Map接口和Collection接口的不同 Map是双列集合的根 ...
- keras中保存自定义层和loss
在keras中保存模型有几种方式: (1):使用callbacks,可以保存训练中任意的模型,或选择最好的模型 logdir = './callbacks' if not os.path.exists ...
- log4net：保存自定义参数到数据库
log4net:保存日志到数据库 自定义参数 新建一个类,继承于PatternLayoutConverter public class CustomerPatternConverter : Patte ...
- iOS 使用NSUserdefault 保存自定义的 对象
一:NSUserDefaults支持的数据格式有:NSNumber(Integer.Float.Double),NSString,NSData,NSArray,NSDictionary,BOOL类型: ...
- OC中保存自定义类型对象的持久化方法
OC中如果要将自定义类型的对象保存到文件中,必须进行以下三个条件: 想要把存放自定义类型的数组进行 持久化(就是将内存中的临时数据以文件<数据库等>的形式写到磁盘上)必须满足: 1. 自定 ...
- docker基本概念，创建、起动实例，保存自定义镜像等常用操作
14年docker火了一阵,当时自学整理了一份文档,后来冷落了. 现在发现很多同事还是想学习docker,但无从下手,所以重新整理了这篇分享,10分钟就可以带你彻底理解docker,并能够创建属于自己 ...
- Git的Bug分支----临时保存现场git stash
软件开发中,bug就像家常便饭一样,有了bug就需要修复,在Git中,由于分支是如此的强大,所以每个bug通过一个新的分支来修复,在修复后,合并分支,然后将临时分支删除. 当你接到一个修复代号为119 ...
随机推荐
- CDH源代码
CDH Packaging and Tarball Information http://www.cloudera.com/content/cloudera/en/documentation/core ...
- c#设计模式之观察者模式(Observer Pattern)
场景出发 一个月高风黑的晚上,突然传来了尖锐的猫叫,宁静被彻底打破,狗开始吠了,大人醒了,婴儿哭了,小偷跑了 这个过程,如果用面向对象语言来描述,简单莫过于下: public class Cat { ...
- Syncthing源码解析 - 启动过程
我相信很多朋友会认为启动就是双击一下Syncthing程序图标,随后就启动完毕了!如果这样认为,对,也不对!对,是因为的确是这样操作,启动了Syncthing:不对是因为在调试Syncthing启动过 ...
- Delphi XE7编译安卓程序出错了
昨天编译一个先前可以正常运行的程序,忽然就不能编译了,总是提示这个错误,经过一番排查,终于搞定了,原因:删除了安卓lib引用的JAR和单元文件.如果你也出现这个问题,打开工程全部目录,看一下是否有打小 ...
- set 集合数据类型
set 数据类型 set 与列表类似,区别在于 set 不能包含重复的值. In [1]: a_list = ['a', 'b', 'c', 'b', 'd', 'm', 'n', 'n'] In [ ...
- Spring中 使用注解+c3p0+事物 《模拟银行转账》
使用注解的方式 模拟转账 要么都成功 要么都失败 !保持一致性! 准备工作: jar包: 需要的类: UserDao: package com.hxzy.spring.c3p0.Dao ...
- FastDFS 安装与使用
FastDFS 安装与使用 1. 什么是 FastDFS FastDFS是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡的设计. Fa ...
- 基于注解的Spring容器源码分析
从spring3.0版本引入注解容器类之后,Spring注解的使用就变得异常的广泛起来,到如今流行的SpringBoot中,几乎是全部使用了注解.Spring的常用注解有很多,有@Bean,@Comp ...
- 根据现有PDF模板填充信息（SpringBoot）
根据现有PDF模板填充信息(SpringBoot+maven) 首先得有一个pdf模板,建立pdf模板需要下载工具 红色框为文本框,filename为域名.java需要根据域名赋值 pom 文件配置 ...
- SpringMVC中重定向传参数的方法
在spring的一个controller中要把参数传到页面,只要配置视图解析器,把参数添加到Model中,在页面用el表达式就可以取到.但是,这样使用的是forward方式,浏览器的地址栏是不变的,如 ...