语法

2023年04月22日

柏拉文

越努力，越幸运

一、表单控件

---

1.1 text

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

1.2 single radio

<label for="checkboxA">A</label>
<input id="checkboxA" value="A" type="radio" v-model="type" />

使用 true-value 和 false-value 自定义 checkbox 的布尔绑定值: true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 yes，取消选择时设为 no。

<label for="checkboxA">A</label>
<input id="checkboxA" value="A" type="radio" v-model="type" true-value="yes" false-value="no"/>

1.3 single select

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

1.4 single checkbox

<label for="checkboxA">A</label>
<input id="checkboxA" value="A" type="radio" v-model="type" />

使用 true-value 和 false-value 自定义 checkbox 的布尔绑定值: true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 yes，取消选择时设为 no。

<label for="checkboxA">A</label>
<input id="checkboxA" value="A" type="radio" v-model="type" true-value="yes" false-value="no"/>

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 single v-model 宏

子组件展示、修改

// 父组件 
<Child v-model="count"></Child>

// 子组件
<script setup>
const model = defineModel({ default: 0, require: true})

function update() {
  model.value++
}
</script>

<template>
  <div>parent bound v-model is: {{ model }}</div>
</template>

子组件双向绑定

// 父组件 
<Child v-model="count"></Child>


// 子组件
<script setup>
const model = defineModel({ default: 0, require: true})
</script>

<template>
  <span>My input</span> <input v-model="model">
</template>

2.1 single v-model 常规

子组件展示、修改

// 父组件 
<Child v-model="count"></Child>

// 子组件 
<template>
  <div>
    {{  props.modelValue }}
  </div>
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function update(){
  emit('update:modelValue', props.modelValue + 1)
}
</script>

子组件双向绑定

// 父组件
<Child v-model="count"></Child>

// 子组件
<template>
  <div>
    <input :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)" />
  </div>
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

2.3 multiple v-model 宏

// 父组件
<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'

const first = ref('John')
const last = ref('Doe')
</script>

<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName
    v-model:first-name="first"
    v-model:last-name="last"
  />
</template>

// 子组件 
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

2.4 multiple v-model 常规

// 父组件
<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'

const first = ref('John')
const last = ref('Doe')
</script>

<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName
    v-model:first-name="first"
    v-model:last-name="last"
  />
</template>


// 子组件 
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>