Vue v-model

v-model 雙向綁定

<script>

    const name = ref('name');

    const setName = (str) => {

        name.value = str;

    }

</script>

<template>

    <input type="text" v-model="name"> //如果不採用v-model 則name 不會被變更

    {{name}}

</template>

v-model三個修飾詞

v-model.lazy = "name" //只有確定改變後才會改變資料

v-model.number = "name" //會自動先轉型為數字

v-model.trim = "name" //會自動把空格刪除

v-model with component

//main

script

import bar from "./components/bar.vue"; //建立一個import component 

const num = ref(0);

template

<bar v-model="num">

// bar.vue

script

const props = defineProps({'modelValue'});

const emit = defineEmits({'update:modelValue'});

template

    <input

        type = "text"

        :value = "props.modelvalue"

        @input = "emit('update:modelValue' , $event.target.value)"

    >

參考 Vue3 + Vite 快速上手 Get Startrd EP4