奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

【第二季】Vue2.0视频教程-todos之答题猜职业

时间:2018-01-20 11:06来源:原创 作者:admin
使用Bootstrap+Vue2.0实现题目的添加,题目可加名称和选项,每个选项对应不同的职业。 添加和删除都是操作本地存储,无页面刷新。 编辑是双击名称和选项,回车或者失去焦点都可以去

使用Bootstrap+Vue2.0实现题目的添加,题目可加名称和选项,每个选项对应不同的职业。

添加和删除都是操作本地存储,无页面刷新。

编辑是双击名称和选项,回车或者失去焦点都可以去掉。

效果图:


第一节:todos之信息的添加和查询



题目的添加:

题目名称、选项、对应职业,可无限制添加选项
<div class="row" style="margin: 20px 0">
            <div class="form-group">
                <label >题目名称</label>
                <input v-model="tinfo.timu_name" type="text" class="form-control"></div>

            <div class="form-group">
                <label >选项
                    <input @click="add_option()"  type="button" class="btn btn-info" value="+"></label>
                <div v-for="n in options_num">
                    <input    type="text" class="form-control" v-model="tinfo.option[n-1]">

                    <span v-for="(value,key) in caree_list">
                        <label ><input    v-model="tinfo.option_caree[n-1][key]"  :value='key' type='checkbox'> {{value}} </label> &nbsp;&nbsp;&nbsp;</span>

                    <br></div>

                </div>
            <div class="form-group">

                <input type="button" @click="save()" class="btn btn-primary" value="保存"></div>
 </div>
   
 

第二节:todos之信息的编辑和删除

双击信息的编辑:

双击题目名称,双击选项以此类推
<td @dblclick="info.is_show=1">
                        <span v-show="info.is_show==0">{{info.timu_name}}</span>
                        <input @blur="update(info,index)"  @keydown.enter="update(info,index)" v-show="info.is_show!=0" type="text" v-model="info.timu_name">
</td>


data部分:

在此定义的有选项数量、职业数组、题目的数据模型、被添加的信息模型
data:{
            options_num:0,
            caree_list:[], //职业数组
            timu_list:[], //题目的数据模型
            tinfo:null
        },


全部源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo  - 答题猜职业的后台管理</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
    <div class="container" style="width: 580px;margin-top: 18px;">
            <h2>答题猜职业的后台管理</h2>
        
        <div class="row" style="margin: 20px 0">
            <div class="form-group">
                <label >题目名称</label>
                <input v-model="tinfo.timu_name" type="text" class="form-control"></div>

            <div class="form-group">
                <label >选项
                    <input @click="add_option()"  type="button" class="btn btn-info" value="+"></label>
                <div v-for="n in options_num">
                    <input    type="text" class="form-control" v-model="tinfo.option[n-1]">

                    <span v-for="(value,key) in caree_list">
                        <label ><input    v-model="tinfo.option_caree[n-1][key]"  :value='key' type='checkbox'> {{value}} </label> &nbsp;&nbsp;&nbsp;</span>

                    <br></div>

                </div>
            <div class="form-group">

                <input type="button" @click="save()" class="btn btn-primary" value="保存"></div>

        </div>
        <table class="table" >
            <tr>

                    <th>题目名称</th>
                    <th>选项</th>
                    <th>操作</th>
                </tr>

                <tr v-for="(info,index) in timu_list">
                    <td @dblclick="info.is_show=1">

                        <span v-show="info.is_show==0">{{info.timu_name}}</span>
                        <!-- v-model -->
                        <input @blur="update(info,index)"  @keydown.enter="update(info,index)" v-show="info.is_show!=0" type="text" v-model="info.timu_name"></td>
                    <td @dblclick="info.is_show=1">

                        <div v-for="(option,opt_index) in info.option">

                            <span v-show="info.is_show==0">
                                <b>{{info.option[opt_index]}}</b></span>
                            <!-- v-model -->
                            <input @blur="update(info,index)"  @keydown.enter="update(info,index)" v-show="info.is_show!=0" type="text" v-model="info.option[opt_index]">
                            适合职业:
                            <span v-for="(caree,code) in info.option_caree[opt_index]">{{caree_list[code]}} </span>

                        </div>
                    </td>
                    <td>
                        <a class="btn btn-danger" @click="del(index)">删除</a>
                    </td>
                </tr>

            </table>
            <div style="margin-top: 38px;color: #666">.双击题目名称和选项进行编辑操作</div>
        </div>

        <!-- /.modal -->
        <script type="text/javascript">
 
    new Vue({
        el:'.container',
        data:{
            options_num:0,
            caree_list:[], //职业数组
            timu_list:[], //题目的数据模型
            tinfo:null
        },
        created(){
            timu = JSON.parse(localStorage.getItem('timu_list'))

            if (timu) {
                this.timu_list = timu
            }
            this.init()
        },    
        methods:{
            init:function () {
                this.options_num = 1
                this.caree_list = ['程序员','动物园','保洁员','堡垒员']
                this.tinfo = {
                    timu_name:'',
                    option:[],
                    is_show:0,
                    option_caree:[{}]
                }
            },
            add_option:function () {
                this.options_num ++
                this.tinfo.option_caree.push({})    
            },
            update:function (info,index) {
                 // 复原双击编辑
                 info.is_show = 0
                this.timu_list[index] = info
                localStorage.setItem('timu_list',JSON.stringify(this.timu_list))
            },
            save:function () {
                // 保存
                if (this.tinfo.timu_name == '') {
                    return
                }
                this.timu_list.push(this.tinfo)
                localStorage.setItem('timu_list',JSON.stringify(this.timu_list))
                this.init()
            },
            del:function (index) {
                // 删除
                this.timu_list.splice(index,1)
                localStorage.setItem('timu_list',JSON.stringify(this.timu_list))
            }
        }
    })
</script>
</body>
</html>
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-22 10:04

关注奔三路小程序,方便你我他