vue+bootstarp用户管理demo

最新推荐文章于 2023-05-28 16:03:22 发布

超高校级的观测者

最新推荐文章于 2023-05-28 16:03:22 发布

阅读量962

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_36048820/article/details/82285983

版权

这篇博客是关于初学者使用Vue.js和Bootstrap构建的一个用户管理演示项目。通过这个Demo，作者展示了如何结合这两项技术来实现用户界面的创建和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue和bootstarp初学所写的用户管理demo

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script type="text/javascript">
            window.onload=function(){
     
                new Vue({
                    el:"#box",
                    data:{
                        myData:[],
                        username:'',
                        age:'',
                        nowIndex:-100,
                        msg:''
                    },
                    methods:{
                        add:function(){
     
                            this.myData.push({
                                name:this.username,
                                age:this.age
                            })
                            this.username='';
                            this.age='';
                        },
                        deleteMsg:function(n){
     
                            if(n==-2){
                                this.myData=[];
                            }

最低0.47元/天解锁文章