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

一、双向绑定

表单元素的双向绑定：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>

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

相关文章

用JSP创建WAP应用（转）

不要忽视代码审查的重要性

[Vue] 13.Vue中的双向绑定(2) ----指令修饰符

使用sql server进行分布式查询（转）

[Spring]@Autowired,@Required,@Qualifier注解

python去掉字符串中空格的方法

[Vue] 14.Vue中的组件：创建子组件以及在父组件中用子组件

中英文词频统计