• 欢迎光临~

v-model实例

开发技术 开发技术 2022-09-28 次浏览
<details>
<summary>代码块(点击展开):</summary>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>new</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 添加水果数据 -->
            <div>
                <input type="text" v-on:keyup.enter="addItem()" v-model="item">
            </div>
            <!-- 删除水果数据 -->
            <ul>
                <li v-for="(it,index) in items">
                    {{it.text}}<button v-on:click="removeItem(index)">X</button>
                </li>
            </ul>
            <!-- 全选水果选项 -->
            <div>
                <input type="checkbox" value="香蕉" v-model="checkFruits"/>香蕉
                <input type="checkbox" value="苹果" v-model="checkFruits"/>苹果
                <input type="checkbox" value="芒果" v-model="checkFruits"/>芒果
                <input type="checkbox" value="芭乐" v-model="checkFruits"/>芭乐
            </div>
            <p>
                <button @click="allChecked">全选</button>
                <button @click="allnotChecked()">全不选</button>
                <button @click="reverseChecked()">反选</button>
            </p>
            <div>
                {{selectChecked()}}
            </div>
        </div>
    </body>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                item:"",
                items:[{text:"苹果"},{text:"香蕉"}],
                checkFruits:[],
                fruits:["香蕉","苹果","芒果","芭乐"],
                tempArr:[]
            },
            methods:{
                addItem:function(){
                    var txt = this.item.replaceAll(' ','');
                    if(txt){
                        this.items.push({text:txt});
                    }
                    this.item = "";
                },
                removeItem:function(idx){
                    this.items.splice(idx,1);
                },
                allChecked:function(){
                    this.checkFruits = this.fruits;
                },
                allnotChecked:function(){
                    this.checkFruits = [];
                },
                reverseChecked:function(){
                    this.tempArr = [];
                    for(var i = 0;i < this.fruits.length;i++){
                        if(!this.checkFruits.includes(this.fruits[i])){
                            this.tempArr.push(this.fruits[i]);
                        }
                    }
                    this.checkFruits = this.tempArr;
                },
                selectChecked:function(){
                    var str = "您选中的水果是:";
                    if(!this.checkFruits.length<1){
                        for(var i = 0;i < this.fruits.length;i++){
                            str = str + this.fruits[i];
                        }
                        return str;
                    }
                }
            }
        })
    </script>
</html>

</details>
程序员灯塔
转载请注明原文链接:v-model实例
喜欢 (0)