Vue.js入门学习--表单input的绑定（六）

最新推荐文章于 2024-05-24 21:21:01 发布

appleyk

最新推荐文章于 2024-05-24 21:21:01 发布

阅读量1w

点赞数 1

本文链接：https://blog.csdn.net/Appleyk/article/details/79226162

版权

Vue2.X前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

完整案列demo

<html>

<head>
    <title>表单input绑定</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        增加一个喜欢的球星：
        <input @keyup.13="addStar" v-model="star">
        <br/>
        <br/>
        <!--  v-model 绑定到checked属性 -->
        <input type="checkbox" id="kobe" @click="setName($event)" v-model="checkedKobe">
        <label for="kobe">科比</label>
        <input type="checkbox" id="james" @click="setName($event)" v-model="checkedJames">
        <label for="james">詹姆斯</label>
        <input type="checkbox" id="jordan" @click="setName($event)" v-model="checkedJordan">
        <label for="jordan">乔丹</label>
        <br/>
        <br/> 你喜欢的球星有：
        <span v-for="name in names">{{ name }} </span>
    </div>
    <br/>
    <br/>
    <div id="app2">
        增加一个喜欢的球星：
        <input @keyup.enter="addStar" v-model="star">
        <br/>
        <br/>
        <!-- v-model 绑定names数组，如当前DOM对象被选中将其value属性值加进names数组中 反之移除-->
        <input type="checkbox" value="科比" v-model="names">
        <label for="kobe">科比</label>
        <input type="checkbox" value="詹姆斯" v-model="names">
        <label for="james">詹姆斯</label>
        <input type="checkbox" value="乔丹" v-model="names">
        <label for="jordan">乔丹</label>
        <br/>
        <br/> 你喜欢的球星有：
        <span v-for="name in names">{{ name }} </span>
    </div>


</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            star: '史蒂芬·库里',
            names: ['科比'],
            checkedKobe: true,
            checkedJames: false,
            checkedJordan: false
        },
        methods: {
            setName: function (event) {
                if (event && event.currentTarget.id === 'kobe') {
                    //!this.checkedKobe -- 自身取反，如果是true，勾选之后就是false，反之则是true
                    if (!this.checkedKobe === true) {
                        this.names.push('科比')
                    } else { //否则，移除当前喜欢的球星
                        for (var i = 0; i < this.names.length; i++) {
                            var name = this.names[i]
                            if (name === '科比') {
                                this.names.splice(i, 1)
                            }
                        }
                    }
                } else if (event && event.currentTarget.id === 'james') {
                    if (!this.checkedJames === true) {
                        this.names.push('詹姆斯')
                    } else {
                        for (var i = 0; i < this.names.length; i++) {
                            var name = this.names[i]
                            if (name === '詹姆斯') {
                                this.names.splice(i, 1)
                            }
                        }
                    }
                } else {
                    if (!this.checkedJordan === true) {
                        this.names.push('乔丹')
                    } else {
                        for (var i = 0; i < this.names.length; i++) {
                            var name = this.names[i]
                            if (name === '乔丹') {
                                this.names.splice(i, 1)
                            }
                        }
                    }
                }
            },
            addStar: function () {
                var isExists = false;
                for (var i = 0; i < this.names.length; i++) {
                    var name = this.names[i]
                    //如果喜欢的球星里面有star，则star存在标记置为true，循环终止
                    if (name === this.star) {
                        isExists = true;
                        break;
                    }
                }
                //只有star不存在的时候，才往names数组里面添加star
                if (!isExists) {
                    this.names.push(this.star)
                }
            }
        }
    })


    new Vue({
        el: '#app2',
        data: {
            star: '史蒂芬·库里',
            names: [],

        },
        methods: {
            addStar: function () {
                var isExists = false;
                for (var i = 0; i < this.names.length; i++) {
                    var name = this.names[i]
                    //如果喜欢的球星里面有star，则star存在标记置为true，循环终止
                    if (name === this.star) {
                        isExists = true;
                        break;
                    }
                }
                //只有star不存在的时候，才往names数组里面添加star
                if (!isExists) {
                    this.names.push(this.star)
                }
            }
        }
    })
</script>

</html>

一、如果input的类型是textbox，则下面v-model双向绑定的值为其对应的value属性

（1）DOM