很乱，临时保存，自定义v-model

 1 
 2 
 3   
 4     "utf-8">
 5     "viewport" content="width=device-width,initial-scale=1.0">
 6     
 7   
 8   
 9 
10 
11       
14 
15       
20 
21       
24 
25       
37 
38       
46 
47     
"app">
48         
49     
50     
51   
52 

  1 // The Vue build version to load with the `import` command
  2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3 import Vue from 'vue'
  4 import router from './router'
  5 //import ElementUI from 'element-ui'
  6 //import 'element-ui/lib/theme-chalk/index.css'
  7 
  8 //import App from './App'
  9 
 10 Vue.config.productionTip = false
 11 //Vue.use(ElementUI)
 12 
 13 
 14 Vue.component('hello-component',    {
 15   template: '#hello',
 16   data:    function    ()    {
 17       return    {
 18           msg:    'Hello'
 19       }
 20   },
 21   props:    ['user']
 22 });
 23 
 24 
 25 Vue.component('form-component',    {
 26   template:    '#form',
 27   props:    ['value'],
 28   methods:    {
 29     onInput:    function    ()    {
 30         this.$emit('input',    event.target.value)
 31     }
 32 }
 33 });
 34 
 35 Vue.component('zz',{
 36   template:'#fff',
 37   model: {
 38     //这里的modlVal ，如果不自己定义，默认是prop:'value'，input类似标签
 39     //将值存进value里，我们声明了ModelVal，就不存进value里，而是存进modelVal里
 40     prop: 'modelVal',
 41     event: 'change'
 42   },
 43   props: {
 44     value: {
 45       type: Boolean,
 46     },
 47     modelVal: {
 48       default: ""
 49     },
 50     label: {
 51       type: String
 52     },kk:{
 53       type:String
 54     }
 55   },
 56   computed: {
 57     checkVal() {
 58       console.log("----------")
 59       console.log(this.modelVal)
 60       console.log(this.kk)
 61       console.log("----------")
 62       console.log( this.modelVal === this.value)
 63       return this.modelVal === this.value
 64     }
 65   },
 66   methods: {
 67     update() {
 68       this.$emit('change', this.checkVal)
 69     }}
 70 })
 71 
 72 Vue.component('my-checkbox', {
 73   template:'#c',
 74   model: {
 75     //这里就是hello存储true或者false ，替代false
 76     prop: 'hello',
 77     event: 'change'
 78   },
 79   props: {
 80     hello:Boolean, //这里也要先声明hello，
 81     value: String
 82   },
 83   methods:{
 84     onChange () {
 85       console.log(this.hello)
 86       console.log(this.value)
 87       console.log(event.target.checked)
 88         this.$emit('change',event.target.checked)
 89 
 90     }
 91   }
 92 })
 93 
 94 Vue.component('greetings-component',    {
 95   template:    '#greetings',
 96   data:    function    ()    {
 97       return    {
 98           user:    'heroaa',
 99           foo:'hello',
100           f:true,
101           world:'world',
102           hk:"",
103           modelVal:''
104       }
105   },
106   methods:{
107     get (v) {
108       console.log(v)
109     }
110   }
111 });
112 
113 /* eslint-disable no-new */
114 new Vue({
115   el: '#app',
116   data:{
117     user:'hero'
118   }
119 })

 

转载于:https://www.cnblogs.com/or2-/p/8438475.html