vue指令练习demo

最新推荐文章于 2022-12-09 16:43:17 发布

qq_34822482

最新推荐文章于 2022-12-09 16:43:17 发布

阅读量301

点赞数

分类专栏： vue，练习demo 文章标签： vue 增删改查指令练习

本文链接：https://blog.csdn.net/qq_34822482/article/details/78409682

版权

vue，练习demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue练习demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../vue1026.js"></script>
    <!--1.引入vuejs文件-->
    <style>
        #app{
            width: 800px;/*先绘制div在调整位置在填充内容*/
            margin: 20px auto;/*使用margin:0 auto;居中盒子盒子必须有宽度*/
        }
        #tb{
            width: 800px;
            border-collapse: collapse;
            margin-top: 20px;
        }
        #tb th{
            background-color: #0094ff;
            border: 1px solid black;
            color: white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
        }
        #tb td{
            text-align: center;
            font-size: 20px;
            padding: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<!--3.绘制静态页面-->
<div id="app">
    <input type="text" v-model="id"/><!--v-model实现双向数据绑定，所绑定的数据在data中定义-->
    <input type="text" v-model="pname"/>
    <button @click="addData">添加数据</button>
    <br/>
    <table id="tb">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-show="list.length==0"><!--当list没有数据时显示此内容-->
            <!--v-show，如果=后的判断条件为真，则显示，相当于if=后的条件为真，则设置此dom元素display:block;-->
            <td colspan="4">当前列表没有任何数据</td>
        </tr>
        <tr v-for="item in list"><!--v-for实现数据的遍历-->
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td>
                <a href="javascript:void (0)" @click="">删除</a>
            </td>
        </tr>
    </table>
</div>
</body>

<script>
//    2.创建组件
    var vm=new Vue({
        el:"#app",//组件的作用范围
        data:{//组件的所含的数据，变量，常量
            color1:"red",
            list:[{
                id:1,
                name:"奔驰",
                ctime:new Date()
            },{
                id:2,
                name:"宝马",
                ctime:new Date()
            },{
                id:3,
                name:"奇瑞",
                ctime:new Date()
            }],
            id:0,
            pname:''

        },
        methods:{//组件的方法
            //每实现一个功能将其注册为一个方法和对应的dom元素绑定
            addData:function(){/*实现数据添加功能*/
                //从input中获取输入的数据，将其添加到data.list中，vue会自动渲染dom元素
                //怎么获取input中的数据？用v-model实现双向绑定，输入的数据即为组件中的数据
                var p={
                    id:this.id,
                    name:this.pname,
                    ctime:new Date()
                }
                this.list.push(p);
                //清空页面上的文本框中的数据
                //vue将对dom的操作转化为对数据的操作
                this.id='';
                this.pname='';
            }
        }
    })
</script>
</html>