很乱，临时保存，自定义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 ...
随机推荐
- 9、Dockerfile语法
在Dockerfile中定义了很多关键字,通过关键字来完成Dockerfile的编写. Dockerfile官方文档 9.1 FROM 在Dockerfile中FROM主要是指定这个Doc ...
- 四则运算生成器（java) 蔡苑菲，陆海燕
github地址:https://github.com/Nancy0611/Myapp.git 一.项目相关要求 使用 -n 参数控制生成题目的个数,例如 Myapp.exe -n 10 将生成10个 ...
- sitecore 缓存管理器
namespace XXX.Shared.Infrastructure.Caching { using System; using System.Collections.Generic; using ...
- Cockroachdb 四、用户管理及授权
四 用户管理及授权 用户管理 简介# Create a user:cockroach user set <username> <flags> # List all users: ...
- PostgreSQL递归查询
原料 --创建组织架构表 create table "Org"( "OrgId" ) primary key, "ParentId" ), ...
- Polynomial （ Arithmetic and Algebra） CGAL 4.13 -User Manual
1 Fundamentals A polynomial is either zero, or can be written as the sum of one or more non-zero ter ...
- “java.lang.NullPointerException”异常分析
1.父类定义的某个属性,没有被子类使用,或者在子类中,又重新定义一次. 2.因为调用了一个object的方法,且此object的reference为null:比如说:String a=null; // ...
- 使用memcache或redis限制某个用户或者某ip用户一段时间内最大投票次数
实现每个用户在某网站10分钟内最多投票5次 function isFrequently($key){ $t = 60*10; $n = 5; $mem = new Memcache(); $mem-& ...
- [Linux] 如何在 Linux 中提取随机数
如何在 Linux 中提取随机数 一.设备文件 /dev/random & /dev/urandom 字符特殊文件 /dev/random 和 /dev/urandom (存在于Linux 1 ...
- 如何使用Node爬虫利器Puppteer进行自动化测试
文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是 ...