语法

2023年04月22日

柏拉文

越努力，越幸运

一、表单控件

---

1.1 text

<input type="text" v-model="num" />

1.2 single radio

<div>
    <div class="checkbox">
        <label for="checkboxA">A</label>
        <input id="checkboxA" value="A" type="radio" v-model="type" />
        <label for="checkboxB">B</label>
        <input id="checkboxB" value="B" type="radio" v-model="type" />
        <label for="checkboxC">C</label>
        <input id="checkboxC" value="C" type="radio" v-model="type" />
    </div>
    <div>
        {{ type }}
    </div>
</div>

data() {
    return {
      type: "A"
    };
}

1.3 single select

<div>
    <select v-model="like">
      <option value="A">A 爱好</option>
      <option value="B">B 爱好</option>
      <option value="C">C 爱好</option>
    </select>
    <div>
      {{ like }}
    </div>
</div>

data() {
    return {
      like: "A"
    };
}

1.4 single checkbox

<div class="checkbox">
    <label for="checkbox">是否展示</label>
    <input id="checkbox" type="checkbox" v-model="isShow" />
</div>

data() {
    return {
      isShow: true
    };
}

1.5 multiple select

<div>
    <select v-model="like" multiple>
      <option value="A">A 爱好</option>
      <option value="B">B 爱好</option>
      <option value="C">C 爱好</option>
    </select>
    <div>
      {{ like }}
    </div>
</div>

data() {
    return {
      like: [],
    };
}

1.6 multiple checkbox

<div>
    <div class="checkbox">
      <label for="checkboxA">A</label>
      <input id="checkboxA" value="A" type="checkbox" v-model="like" />
      <label for="checkboxB">B</label>
      <input id="checkboxB" value="B" type="checkbox" v-model="like" />
      <label for="checkboxC">C</label>
      <input id="checkboxC" value="C" type="checkbox" v-model="like" />
    </div>
    <div>
      {{ like }}
    </div>
</div>

data() {
    return {
      like: ['A'],
    };
}

二、自定义组件

---

2.1 text 输入框

父组件

<template>
  <div>
    <AComp v-model="text"></AComp>
  </div>
</template>

<script>
import AComp from './aComp.vue';

export default {
    name: "App",
    components: { AComp },
    data() {
        return {
            text: "为人进出的门紧锁着"
        };
    },
    
};
</script>

子组件

<template>
  <div>
    <input value="text" @change="$emit('change',$event.target.value)"/>
  </div>
</template>

<script>
export default {
  props:{
    text: String
  }
};
</script>

2.2 checkbox 复选框

JavaScript

<template>
  <div>
    <AComp v-model="like"></AComp>
    <div>
      已选择: {{ like }}
    </div>
  </div>
</template>

<script>
import AComp from './aComp.vue';

export default {
    name: "App",
    components: { AComp },
    data() {
        return {
            like: []
        };
    },
    
};
</script>

TavaScript

<template>
  <div>
    <label for="checkboxA">A</label>
    <input id="checkboxA" type="checkbox"  @change="$emit('change',$event.target.checked)"/>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props:{
    like: {
      type: Array,
      default: ()=> []
    }
  }
};
</script>