很乱，临时保存，自定义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 ...
随机推荐
- web项目开发最佳做法
一个成熟的web项目应该具备以下基础代码或做法 1.前端基础框架: 统一的ajax 通信/表单提交及调用结果弹窗显示 统一的数据验证 统一的数据列表 2.后端基础框架: 统一的异常处理捕获,可针对具体 ...
- centos 中 mongodb 启动失败的修复
mongodb是使用centos的yum命令安装的,整个的安装过程如下: 1. 运行 yum info mongo-10gen查看是否有mongodb源,如有跳至第3步. 2. 运行 vim /etc ...
- WPF自定义ComboBox
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}"> &l ...
- Android中Textview显示Html，图文混排，支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- Asp.net Core IIS上安装部署及502.5错误解决
总结: 安装Microsoft Visual C++ 2015 Redistributable(https://www.microsoft.com/en-us/download/details.asp ...
- dokcer 的export 、improt和save 、load
export .improt 是对容器操作也就是类似于虚拟机的快照 save .load 是针对于镜像操作的..
- epoll好文章
https://www.cnblogs.com/apprentice89/p/3234677.html https://www.jianshu.com/p/aa486512e989 https://c ...
- html页面pc显示正常，在手机端适配也可以看整个页面
<meta name="viewport" content="width=1250,initial-scale=0,maximum-scale=2"/&g ...
- CTF web题型解题技巧
工具集 基础工具:Burpsuite,python,firefox(hackbar,foxyproxy,user-agent,swither等) 扫描工具:nmap,nessus,openvas sq ...
- CF77E Martian Food（圆的反演or 笛卡尔定理+韦达定理）
题面 传送门 这题有两种方法(然而两种我都想不到) 方法一 前置芝士 笛卡尔定理 我们定义一个圆的曲率为\(k=\pm {1\over r}\),其中\(r\)是圆的半径 若在平面上有两两相切,且六个 ...