实时界面生成

arpenker

浏览: 334237 次
性别:
来自: 广州

最近访客更多访客>>

xujianxie

guojch

唯-我-独-尊

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

把代码贴进来
https://www.runoob.com/try/try.php?filename=vue2-example-4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 搜索页面</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

    <style>
        table{
            margin:20px auto;
            border-collapse: collapse;
        }
        td,th{

            width: 100px;
            height: 40px;
            border-bottom:1px solid #999;
            text-align: center;

        }


    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th><button @click="quanxuan">全选</button></th>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th><button>删除</button></th>
        </tr>
        <tbody v-bind:class="{solids:items.stat}" v-for="(items,key) in arr">

            <tr >
                <td><input type="checkbox" v-model="items.stat"></td>
                <td>{{key+1}}</td>
                <td>{{items.name}}</td>
                <td>{{items.age}}</td>
                <td><button v-on:click="del(key)">删除</button></td>
            </tr>

        </tbody>
        <tr><td colspan="5"><button v-on:click="qk">清空</button></td></tr>

    </table>
    <div id="add">
        <h3>添加</h3>
        <form action="">
            <label for="">姓名</label>
            
            <input type="text" v-model="val" value=""><br>
            <label for="">年龄</label>
            
            <input type="text" v-model="val2" value="">
        </form><br>
        <button @click="Add">添加</button>
    </div>
</div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                // 初始化
                val:"",
                val2:"",
                Age:"",
                arr:[
                    {

                        age:"22",
                        name:"张三"

                    },{
                        age:"11",
                        name:"李四"
                    }
                ],
            },
            methods:{
                Add:function(){
                // 输入框的输入数据非空时
                if(!(this.val=="")){
                    //拿到数据，创建对象，将数据融合到数组items中
                    var newarr ={}
                    newarr.name=this.val;
                    newarr.age=this.val2;
                    newarr.stat=false
                    this.arr.push(newarr) //将整合好的数据对象放到数组中去
                    this.val="" //清空文本框
                    this.val2=""
                    console.log(this.val2)
                }else{
                    alert("请输入数据，输入不能为空！");
                }
                },
                del:function(key){
                    this.arr.splice(key,1);
                },
                // 清空功能
                qk:function(){
                    var gaga = this.arr
                    // 设置一个容器用来装没有被选中的数组
                    var rongarr = []
                    for(var i=0;i<gaga.length;i++){
                        if(gaga[i].stat==!true){
                            // gaga.splice(i,1)
                            // 将没有选中的放到一个数组rongarr中
                            rongarr.push(gaga[i])
                        };

                    };
                     // 给arr重新赋值为rongarr
                    this.arr = rongarr


                },
                quanxuan:function(){
                    var checkBox = this.arr
                    for(var i=0;i<checkBox.length;i++){
                        checkBox[i].stat=true;
                    }
                },

            }
        })
    </script>
</body>
</html>

分享到：

vue界面自动化生成 | 用mysql连es一直报错

2022-07-18 20:34
浏览 123
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论