10 12 Vue

吃土豆炖豆角文艺吗

于 2019-10-12 15:30:53 发布

阅读量89

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_40710524/article/details/102515485

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

todoList

<body>
    <div id="app">
        <input type="text" v-model="val">
        <button v-on:click="add">添加事件</button>
        <ul>
            <li v-for="(item,index) in list">{{ item.title}} 
                <button @click="del(index)">删除</button>
            </li>
            
        </ul>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                val:"",
                list:[{title:1},{title:2}]
            },
            methods:{
                add(){
                    this.list.push({title:this.val});
                    this.val="";
                },
                del(myIndex){
                    // console.log(index)
                    console.log(myIndex);
                   this.list =  this.list.filter((item,index)=>{
                    //    alert(index)
                        return myIndex != index;
                    })
                    //要说的是删除操作 filter过滤 传入的函数里面的参数index会遍历  0 1 2 3等
                    // 而点击删除事件的参数myIndex则是对应的点击的那个index  遍历后把myINdex ！=index的过滤出来  相等的过滤掉 即是删除操作了
                     
                }
            }

        })
    </script>

表单部分

<div @click="++count" id="app">{{count}}
            A<input type="checkbox" value="a" v-model="checked">{{checked}}
            B<input type="checkbox"   v-model="checked">{{checked}}
            <select v-model="selectVal">
                <option disabled>选择</option>
                <option value="选择的是A">A</option>
                <option value="选择的是B">B</option>

            </select>

            {{ selectVal }}
            <select v-model="selectVal2" multiple>
                    <option disabled>选择</option>
                    <option value="选择的是A" multiple>A</option>
                    <option value="选择的是B" multiple>B</option>
    
                </select>
                {{ selectVal2 }}
     <input type="text" v-model.lazy="a">
     <input type="text" v-model="a">

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm =new Vue({
            el:"#app",
            data:{
                count:0,
                checked:[],
                selectVal:'请选择',
                selectVal2:[],
                a:'',
            },

        })
    </script>