很亂，臨時保存，自定義v-model

時間 2020-05-31

標籤臨時保存自定義 model 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>learn1</title>
 7   </head>
 8   <body>
 9 
10 
11       <template    id="hello">
12           <h1>{{msg}}    {{user}}</h1>
13       </template>
14 
15       <template    id="form">
16           <div>
17               <input    :value="value"    type="text"    id="name"    v-on:input="onInput">
18           </div>
19       </template>
20 
21       <template id='c'>
22         <input type="checkbox"    v-on:change="onChange"/>
23       </template>
24 
25       <template    id="greetings">
26           <div>
27               <my-checkbox v-model='f' value="some value" ></my-checkbox>
28               <h1>{{f}}</h1>
29               <hr>
30               //此處v-model=kk,目的是zz子組件將本身的值傳遞給父組件的hk 31               //kk=112，是將父組件的112,或者父組件的其餘值傳遞給子組件 32               //也就是說在自定義模板上定義v-mode目的是向外傳遞 33               //kk=112或其餘相似屬性，目的是向內傳遞給本身定義的模板的屬性
34               <zz v-model='hk' kk="112"></zz>
35           </div>
36       </template>
37 
38       <template id="fff" >
39         <label>
40           //這裏的:checked是input自帶屬性，不是咱們定義的，它接收checkval方法計算的值 41           //:kk="kk"對應上面的 zz標籤裏的 kk=112，能夠理解將112傳遞給kk,kk傳遞給:kk
 //這個 checkval是計算屬性，將計算結果傳遞給:checked，這個checkVal做用是，在父組件裏使用子組件，在子組件上的v-model上的值傳遞給子組件

42           <input type="radio" :checked="checkVal" :kk="kk" @change="update">
43  {{ modelVal }} 44         </label>
45       </template>
46 
47     <div    id="app">
48         <greetings-component></greetings-component>
49     </div>
50     <!-- built files will be auto injected -->
51   </body>
52 </html>

 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 })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。