Article From:https://www.cnblogs.com/weibanggang/p/9969848.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="div2" v-bind:style="mystyle">
                <section>
                    <h1>{{title}}</h1>
                        <table>
                            <tr>
                                <th>id</th>
                                <th>Full name</th>
                                <th>Gender</th>
                            </tr>
                            <tr v-for="person in persons">
                                <td>{{person.id}}</td>
                                <td>{{person.name}}</td>
                                <td>{{person.sex}}</td>
                                <td>
                                <a href="#" @click="remove(person.id)">delete</a>
                                </td>
                            </tr>    
                        </table>
                    </section>
                    <button @click="changeStyle"> Discoloration</button>
                    <div><input  v-model.number="person.id" ></div>
        <div><input  v-model.number="person.name" ></div>
        <div><input  v-model.number="person.age"></div>
            <button @click="submit">Submission</button>
        </div>
        <script src="css/vues.js"></script>
        <script>
            var vm=new Vue({
                el:"#div2",
                data:{
                    title:'Render data',
                    persons:[{
                        name:'Zhang San',
                        sex:'male',
                        id:18
                    },
                    {
                        name:'Li Si',
                        sex:'male',
                        id:22
                    },
                    {
                        name:'Li Si',
                        sex:'male',
                        id:22
                    },
                    {
                        name:'Wang Wu',
                        sex:'female',
                        id:38
                    },
                    ],
                    mystyle:"color:red",
                    person:{id:0,name:"",sex:0}
                },
                methods:{
                    changeStyle:function(){
                        var colors=["green","red","yellow"];
                        var randColor=colors[Math.floor(Math.random()*colors.length)];
                        this.mystyle="color:"+randColor;
                    },
                    submit:function(){
                            this.persons.push({
                            id:this.person.id,
                            name:this.person.name,
                            sex:this.person.sex,
                            });
                            console.log(this.persons);
                    },
                    remove:function(id){
                        this.persons=this.persons.filter((b) => b.id != id);
                    }
                },
                watch:{
                    id:function(n,o){
                        console.log(`Modified n: ${n} Modified o: ${o} `}}Computed:{RevMsg:function(){
                        return this.msg.split("").reverse().join("");
                    }
                }
            });
        </script>
    </body>
    
</html>

Operation effect:

 

Link of this Article: Vue case list

Leave a Reply

Your email address will not be published. Required fields are marked *