JS 框架——Vue

最新推荐文章于 2024-05-15 08:57:18 发布

Wanidde

最新推荐文章于 2024-05-15 08:57:18 发布

阅读量338

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/wan_ide/article/details/102767390

版权

WEB 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、Vue的介绍：

Vue.js 是一套构建用户界面的渐进式框架。

二、Vue的使用：

在使用是需要引入一行代码：

<script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

其他更多细节可以去菜鸟教程查询学习：https://runoob.com/vue2/vue-tutorial.html

例子：

用Vue写了一个学生信息管理页面，可以对已有学生信息进行模糊查询，也可以录入新的学生信息，还可以对已有学生信息进行修改和删除。

效果：

实现：

<!DOCTYPE html>
<html>
    
    <head>
        <title>学生信息管理页面</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
    </head>

    <body>
        <div id="app" class="container">
            <br><br>
            <legend>
                模糊查询
            </legend>
            <label>关键词：</label>

            <!-- 绑定model中的search.key，将内容和下面的数据相比较 模糊查询-->
            <input type="text" v-model="search.key" class="form-control" >
            <br><br>

            <legend>
                录入
            </legend>
            <div class="form-group">
                <label>姓名：</label>
                <!-- 绑定model中newPerson.name -->
                <input type="text" v-model="newPerson.name" class="form-control" > 
            </div>

            <div class="from-group">
                <label>年龄：</label>
                <input type="number" v-model="newPerson.age" class="form-control">
            </div>

            <div class="form-group">
                <label>性别：</label>
                <select v-model="newPerson.sex" class="form-control">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <button @click="creatPerson">确定</button>
            </div>
            <br>

            <legend>
                查询结果
            </legend>
            <table class="table table-bordered table-striped text-center">
                <thead>
                    <tr>
                        <th>用户Id</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 搜索框进行模糊查询 -->
                    <tr v-for="(person,index) in people" v-if="person.name.indexOf(search.key)>=0 
                        || person.sex==search.key || person.age==search.key||person.id==search.key">
                        <td>{{person.id}}</td>
                        <td>{{person.name}}</td>
                        <td>{{person.age}}</td>
                        <td v-if="person.sex == '男'">男</td>
                        <td v-else>女</td>
                        <td class="text-center"><a href="#" v-on:click="editPerson(person)">编辑</a>&nbsp&nbsp&nbsp
                            <a href="#" v-on:click="deletePerson(index)" >删除</a></td>
                    </tr>
                </tbody>
            </table>

            总人数：{{sum}}人
            <br>
            平均年龄：{{average}}岁
            <br><br><br>

            <div class="panel panel-primary ">
                <div class="panel-heading text-center">修改用户信息</div>
                <table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th>用户Id</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="number" class="form-control" v-model="rowtemplate.id"></td>
                            <td><input type="text" class="form-control" v-model="rowtemplate.name"></td>
                            <td><input type="number" class="form-control" v-model="rowtemplate.age"></td>
                            <td>
                                <select class="form-control" v-model="rowtemplate.sex">
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                            </td>
                            <td><button @click="Save" class="btn btn-primary">保存</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>
    </body>
    
    <script>
        // 初始化Vue
        //el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
        //data中为模型
        //methods为方法
        var vm = new Vue({
        el: '#app',
        data: {
            search: {
                key: ""
            },
            newPerson: {
                id: 0,
                name: '',
                age: 0,
                sex: '男'
            },
            people: [{
                id: 1,
                name: '李刚',
                age: 30,
                sex: '男'
            }, {
                id: 2,
                name: '玛丽',
                age: 26,
                sex: '男'
            }, {
                id: 3,
                name: '王琦',
                age: 22,
                sex: '女'
            }, {
                id: 4,
                name: '林黛玉',
                age: 36,
                sex: '男'
            }],
            rowtemplate: {id: 0,name: '',age: 0,sex: ''},
        },
        methods: {
            //录入
            creatPerson: function () {
                this.newPerson.id = this.people.length + 1;  //当添加新用户时id自动＋1
                this.people.push(this.newPerson);
                this.newPerson = { name: '', age: 0, sex: '男'};
                
            },
            //删除
            deletePerson: function (index) {
                // 删除一个数组元素
                this.people.splice(index,1);
            },
            //编辑信息
            editPerson: function (person) {
                this.rowtemplate = person;  //把表格中的信息获取下来
            },
            //保存并判断姓名不能为空
            Save: function () {
                if(this.rowtemplate.name == ''){
                    alert("用户名不能为空！");
                }
                this.rowtemplate = {id: 0,name: '',age: 0,sex: ''};
            }
        },
        computed: {   //计算函数
           //求和
            sum: function () {
                return this.people.length
            },
            //求年龄平均值
            average: function () {
                var summ=0;
                for(var i=0;i<this.people.length;i++){
                    summ+=this.people[i].age;
                }
                return (summ/this.people.length).toFixed(1);
            }
        },
        })
    </script>
</html>

Wanidde

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 框架——Vue

一、Vue的介绍：Vue.js 是一套构建用户界面的渐进式框架。二、Vue的使用：在使用是需要引入一行代码：<script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。data用于定义属性，实例中有三个属性...
复制链接

扫一扫

专栏目录