9、Vue3 多个 v-model 绑定

Posted 2023-03-19

参考技术A 通过利用以特定 prop 和事件为目标的能力，现在可以在单个组件实例上创建多个 v-model 绑定。
每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项：

v-model双向数据绑定

v-model双向数据绑定的修饰符

.lazy：失去焦点时数据进行双向的绑定  v-model.lazy=”message ”
.number：前面输入数字，后面接着字母自动去除掉。v-model. number =”message ”
.trim：去掉打头的空格，内容之间还是可以产生空格。

 v-model表单按钮方面的双向绑定

html

     <div id="app">
             <h2>最简单的双向数据绑定</h2>  
                 <p v-text="message1"></p>
                 <input type="text"  v-model="message1"/>
             <h3>多选按钮绑定一个值</h3>
                <input type="checkbox" id="isTrue" v-model="isTrue">
                <label for=‘isTrue‘>{{isTrue}}</label>
      
             <h3>多选绑定一个数组</h3>
         <p>
              <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
              <label for="JSPang">JSPang</label><br/>
              <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
              <label for="JSPang">Panda</label><br/>
              <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
              <label for="JSPang">PanPan</label>
              <p>{{web_Names}}</p>
        </p>

            <h3>单选按钮绑定</h3>
                <input type="radio" id="one" value="男" v-model="sex">
                <label for="one">男</label>
                <input type="radio" id="two" value="女" v-model="sex">
                <label for="one">女</label>
                <p>{{sex}}</p>
        </div>

js

 

 var vm = new Vue({
            el:"#app",
            data:{
               message1:123,
               isTrue:true,
               web_Names:[],
               sex:"男"
            }
        })