很乱，临时保存，自定义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 ...
随机推荐
- ctx.header
ctx.headers 获取所有的 header 信息,等同于 ctx.header. session session的中文翻译是“会话”,当用户打开某个web应用时,便与web服务器产生一次sess ...
- Homework 4
Homework 4 开发工具:dev c++ 开发语言:c++ 源代码上传至github:上传一直失败... 合作人:曹权 博客地址:http://www.cnblogs.com/c2016/ 这里 ...
- 在SQL Server 2008中执行透明数据加密
问题 安全是任何公司的一个主要考量.数据库备份容易被偷并被恢复到另一个SQL Server实例上.当我们浏览SQL Server 2008的新特性时,我们对一个叫做透明数据加密的特性很感兴趣,我们可以 ...
- 查看JVM
通过jconsole.exe来查看,jconsole.exe所在目录为/%JAVA_HOME%/bin/jconsole.exe 需要配置: -Dcom.sun.management.jmxrem ...
- ajax 与 form 提交的区别
有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新:Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请求 ...
- C# 使用dynamic类型来访问JObject对象
dynamic是C#里面的动态类型,可在未知类型的情况访问对应的属性,非常灵活和方便. 使用Json.Net可以把一个Json字符串转换成一个JObject对象,如果有已知强类型,如果有已知对应的强类 ...
- 2018 ACM-ICPC 亚洲区域赛青岛现场赛 —— Problem F. Tournament
题面:http://acm.zju.edu.cn/contest-materials/qd2018/qd2018_problems.pdf 题意: n个骑士决斗K轮 要求是每个骑士只能跟另外一个骑士决 ...
- 创建maven自定义archetype项目
1.安装Nexus这里是用homebrew安装, brew nexus 安装成功后,默认的访问端口为8081, 我这里的访问地址是http://192.168.99.100:8081 默认用户:adm ...
- linux中创建一个回收站
1. mkdir /tmp/trash_tmp 建立一个回收站目录 2. vi /bin/trash 编辑一个文件 mv $@ /tmp/trash_tmp :wq 保存退出 3. ...
- Java 设计模式之单利模式
一.首先介绍一下单例模式: 单例模式(Singleton),也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在.许多时候整个系统只需要拥有一个的全局 ...