vue基础--表单中双向绑定指令--v-model的使用

目录

0.公共部分：

1.input框的数据双向绑定--v-model：

2.textarea标签的数据双向绑定--v-model：

3.checkbox--属性值的双向数据绑定：

 4.radio--属性值的双向绑定：

5.select标签的双向绑定：

6.checkbox属性值特例：

 7.当 input 框失去焦点的时候，再去同步数据的变化--v-model.lazy:

8.v-model.number 的应用：

9.去除输入内容前后的空格，然后再存入数据--v-model.trim：

 

---

0.公共部分：

<div id="root"></div>

<script src="https://unpkg.com/vue@next"></script>

---

 

语法: v-model="Vue数据变量"

双向数据绑定：

• 变量变化 -> 视图自动同步
• 视图变化 -> 变量自动同步

作用：将 vue 的数据变量和表单的 value 属性双向绑定到一起

1.input框的数据双向绑定--v-model： 

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hi'
                }
            },
            methods: {

            },
            template: `
              <div>
               <input v-model="message" />
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

2.textarea标签的数据双向绑定--v-model：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hi'
                }
            },
            methods: {

            },
            template: `
              <div>
               <textarea v-model="message" />
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

3.checkbox--属性值的双向数据绑定：

遇到复选框（checkbox），v-model的变量值：

• 非数组：关联的是复选框的 checked 属性
• 数组：关联的是复选框的 value 属性

单个，

<script>
        const app = Vue.createApp({
            data() {
                return {
                    // message: []
                    message: false
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <p>
                <input type="checkbox" v-model="message" value="vue" />vue
               </p> 
               
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

多个，

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: []
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <p>
                <input type="checkbox" v-model="message" value="vue" />vue
               </p> 
               <p>
                <input type="checkbox" v-model="message" value="js" />js
               </p> 
               <p>
                <input type="checkbox" v-model="message" value="es" />es
               </p> 
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

 4.radio--属性值的双向绑定：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: ''
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <p>
                <input type="radio" v-model="message" value="vue" name="" />vue
               </p> 
               <p>
                <input type="radio" v-model="message" value="js" name="" />js
               </p> 
               <p>
                <input type="radio" v-model="message" value="es" name="" />es
               </p> 
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

5.select标签的双向绑定：

下拉菜单 v-model 要绑定在 select 上

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: ''
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <select v-model="message">
                <option disabled value=''>请选择</option>
                <option value='A'>A</option>
                <option value='B'>B</option>
                <option value='C'>C</option>
               </select> 
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

多选，

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: [],
                    options: [{
                        text: 'A',
                        value: 'A',

                    }, {
                        text: 'B',
                        value: 'B',

                    }, {
                        text: 'C',
                        value: 'C'
                    }]
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <select v-model="message" multiple>
                <option v-for="item in options" :value="item.value">{{item.text}}</option>
               </select> 
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

示例2,：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: [],
                    options: [{
                        text: 'A',
                        value: {
                            value: 'A'
                        }

                    }, {
                        text: 'B',
                        value: {
                            value: 'B'
                        }

                    }, {
                        text: 'C',
                        value: {
                            value: 'C'
                        }
                    }]
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <select v-model="message" multiple>
                <option v-for="item in options" :value="item.value">{{item.text}}</option>
               </select> 
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

6.checkbox属性值特例：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'world'
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <input type="checkbox" v-model="message" true-value="hi" false-value='world' />vue
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

语法: v-model.修饰符="Vue数据变量":

• .number 以parseFloat转成数字类型
•  .trim 去除首尾空白字符
•  .lazy 在change时触发而非inupt时

 7.当 input 框失去焦点的时候，再去同步数据的变化--v-model.lazy:

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'world'
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <input v-model.lazy="message" />vue
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

8.v-model.number 的应用：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: '123'
                }
            },
            methods: {

            },
            template: `
              <div>
                {{typeof message}}
               <input v-model.number="message" />vue
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>

---

9.去除输入内容前后的空格，然后再存入数据--v-model.trim：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello'
                }
            },
            methods: {

            },
            template: `
              <div>
                {{message}}
               <input v-model.trim="message" />vue
              </div>
            `
        });

        //将组件挂到root节点里，即只作用在id等于root的div元素里
        //vm 代表的就是 vue 应用的根组件
        const vm = app.mount('#root');

        //vm.$data 获得数据
        // vm.$data.message = 'root';
</script>