Vue3基础学习笔记（二）Vue基础语法7-表单中双向绑定

smellsummer

已于 2023-07-06 14:07:16 修改

阅读量87

点赞数

分类专栏： vue基础学习笔记文章标签： vue.js 学习笔记

于 2023-07-06 14:06:02 首次发布

本文链接：https://blog.csdn.net/smellsummer/article/details/131282922

版权

vue基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表单中双向绑定

input标签使用v-model

<script>
  // input, textarea, checkbox, radio, select
  // 修饰符 lazy, number, trim
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello',
      }
    },
    template: `
      <div>
        {{message}}
        <input v-model="message"  />
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

textarea标签使用v-model

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

  const vm = app.mount('#root');
</script>

input标签中checkbox使用v-model

用数组存储v-model对应内容，同时input框中写入value

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

改变true和false显示值

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

input标签中checkbox使用v-model

用数组存储v-model对应内容，同时input框中写入value

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

下拉框使用v-model

单选：

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

多选-1

<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message:[]
      }
    },
    template: `
      <div>
        {{message}}
        <select v-model='message' multiple>
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
        </select>
      </div>
    `
  });
  const vm = app.mount('#root');
</script>

多选-2（将多选框模板中的内容使用循环v-for处理）

<script>
  const app = Vue.createApp({
    data() {
      return {
        message:[],
        options:[{
          text:'A',value:'A',
        },{
          text:'B',value:'B',
        },{
          text:'C',value:'C',
        },{
          text:'D',value:'D',
        }]
      }
    },
    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');
</script>

多选-3（value保存其他内容）

<script>
  const app = Vue.createApp({
    data() {
      return {
        message:[],
        options:[{
          text:'A',value:{value:'A'},
        },{
          text:'B',value:{value:'B'},
        },{
          text:'C',value:{value:'C'},
        },{
          text:'D',value:{value:'D'},
        }]
      }
    },
    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');
</script>

双向绑定修饰符

.lazy*

input框内容变化后不会快速同步数据的变化，而是在失去焦点后，同步数据的变化

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

.number

类型转换

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