很乱，临时保存，自定义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 ...
随机推荐
- Spring 之 IOC
IoC的全称是Inversion of Control,中文称为控制反转, Martin Flower由根据它创造了一个新词:Dependency Injection,中文称为依赖注入.这两个词讲的是 ...
- Android-系统绘图真相
系统绘图真相:这篇博客是专门讲解,系统内部是如何控制图片的变化,例如:图片缩放/图片旋转/图片平移/等等 注意:⚠️在真实开发过程中:关于图片的 图片缩放/图片旋转/图片平移/等等 操作 是使用动画A ...
- Android-自定义ViewPager
效果图: 布局去指定自定义ViewPager: view.custom.shangguigucustomview.MyCustomViewPager <!-- 仿viewpager --> ...
- JavaScript中的垃圾回收和内存泄漏
摘要: JS内存管理. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 程序的运行需要内存.只要程序提出要求,操作系统或者运行时就必须供给内存.所谓的内存泄漏简单来说是不再用到的 ...
- 【JAVA 学习笔记1】代码注释
在JAVA中支持单行注释和多行注释 1.单行注释,只要在注释的一行代码中加上双斜杠即可 例如: // int a=2,b=4,c=8; 2.多行注释,在开始位置加上/* 结束位置加上*/ 例如 /* ...
- 电表读数归零回滚SQL处理算法
在采集电表数据的时候,可以发现有些电表设备读数会发生回滚.这时候,如果单纯的累加计算用电量,就会出现负值.当然,这也许和电表的质量有关系. “RTQty”(当前读到的读数).“LastQty”(上次读 ...
- MSP430 G2553 LaunchPad GPIO中断
P1.P2端口上的每个管脚都支持外部中断.P1端口的所有管脚都对应同一个中断向量(Interrupt Vector),类似的,P2端口的所有管脚都对应另一个中断向量:通过PxIFG寄存器来判断中断来源 ...
- B/S 类项目改善的一些建议
body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...
- bootstrap-treeview中文API 以及后台JSON数据处理
bootstrap-treeview 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bo ...
- 「NOI2014」魔法森林
题目链接 戳我 \(Solution\) 两个变量,emm...不好搞啊. 于是我们可以按照\(A\)排序.然后动态加边,因为\(A\)是越来越大,所以不需要管他,只要使得\(1\)~\(n\)的路径 ...