表单中双向绑定指令的使用

const app = Vue.createApp({
    data() {
      return {
        message: 'hello',
      }
    },
    template: `
      <div>
        {{message}}
        <input v-model="message"  />
      </div>
    `
  });
  const vm = app.mount('#root');

const app = Vue.createApp({
    data() {
      return {
        message: false
      }
    },
    template: `
      <div>
        {{message}}
        <input type="checkbox" v-model="message"  />
      </div>
    `
  });
  const vm = app.mount('#root');

const app = Vue.createApp({
    data() {
      return {
        message: []
      }
    },
    template: `
      <div>
        {{message}}
        jick<input type="checkbox" v-model="message"  value="jick" />
        dell<input type="checkbox" v-model="message"  value="dell" />
        lee<input type="checkbox" v-model="message"  value="lee" />
      </div>
    `
  });
  const vm = app.mount('#root');

const app = Vue.createApp({
    data() {
      return {
        message: '',
      }
    },
    template: `
      <div>
        {{message}}
        jick<input type="radio" v-model="message"  value="jick" />
        dell<input type="radio" v-model="message"  value="dell" />
        lee<input type="radio" v-model="message"  value="lee" />
      </div>
    `
  });
  const vm = app.mount('#root');

const app = Vue.createApp({
    data() {
      return {
        message: '',
      }
    },
    template: `
      <div>
        {{message}}
        <select v-model="message" multiple>
          <option disabled value=''>请选择内容</option>
          <option value='A'>A</option>
          <option value='B'>B</option>
          <option value='C'>C</option>
        </select>
      </div>
    `
  });
  const vm = app.mount('#root');

const app = Vue.createApp({
    data() {
      return {
        message: [],
        options:[{
          text:'A',value:'A',
        },{
          text:'b',value:'b',
        },{
          text:'c',value:'c',
        }]
      }
    },
    template: `
      <div>
        {{message}}
        <select v-model="message" multiple>
          <option v-for="item in options" :value="item.value">{{item.text}}</option>
        </select>
      </div>
    `
  });
  const vm = app.mount('#root')

const app = Vue.createApp({
    data() {
      return {
        message: "world",
      }
    },
    template: `
      <div>
        {{message}} 
        <input type="checkbox" v-model="message" true-value ="hello"  false-value ="world"/>
      </div>
    `
  });
  const vm = app.mount('#root');

lazy修饰符

const app = Vue.createApp({
    data() {
      return {
        message: "123",
      }
    },
    template: `
      <div>
        {{ message}} 
        <input v-model.lazy="message"/>
      </div>
    `
  });
  const vm = app.mount('#root');

number 修饰符

const app = Vue.createApp({
    data() {
      return {
        message: "123",
      }
    },
    template: `
      <div>
        {{typeof message}} 
        <input v-model.number="message" type="number"/>
      </div>
    `
  });
  const vm = app.mount('#root');

trim 修饰符

const app = Vue.createApp({
    data() {
      return {
        message: "123",
      }
    },
    template: `
      <div>
        {{ message}} 
        <input v-model.trim="message"/>
      </div>
    `
  });
  const vm = app.mount('#root');