[Vue] 13.Vue中的双向绑定(1) ----基本用法

最新推荐文章于 2023-05-28 15:18:10 发布

weiweicn!

最新推荐文章于 2023-05-28 15:18:10 发布

阅读量95

点赞数

分类专栏： Vue 文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/u014627255/article/details/125200680

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、双向绑定

表单元素的双向绑定：v-model

input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello'
                }
            },
            template: `
                <div>
                    {{message}}
                    <input v-model="message"/>
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

2 ) textarea:

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

3 )一个checkbox:

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

4 ) 多个checkbox

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

在这里插入图片描述

5 ) radio:

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

在这里插入图片描述
6 ) select

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

在这里插入图片描述

7 ) select 多选

<script>
        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')
    </script>