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

奔三路学习网

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

vue面试作品之简单的商品添加案例 | 奔三路学习

时间:2017-10-19 10:54来源: 作者:
商品添加流程第一步:先保存第一个,a/表格  b/表单  c/表弟  d/模型第二步:点击保存按钮,获取相关数据第三步:往商品列表模型里面添加这一条商品:商品名称/商品价格第四步:

商品添加流程

第一步:先保存第一个,a/表格  b/表单  c/表弟  d/模型
第二步:点击保存按钮,获取相关数据
第三步:往商品列表模型里面添加这一条商品:商品名称/商品价格
第四步:表格显示商品列表

20171017104945

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城商品管理</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- vue的第一步: -->
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <style type="text/css">
        .ver_list{border: 1px solid #eee;margin-bottom: 20px;padding: 10px;margin-right: 10px;width: 32%}
    </style>
</head>
<body>
    <!-- form  -->
    <div class="container" id="vue_box">
        <!-- view层 -->
        <input type="text" v-model="message" v-on:keydown.down="doKey()">
        <h2>{{ message }}</h2>
        <form action="" class="form">
            <!-- 每一个输入框,形成一个表单组:form-group -->
            <div class="form-group">
                <label>商品名称</label>
                <!-- v-model 指令 双向数据绑定 -->
                <input type="text" class="form-control"  v-model="goods_name"></div>

            <div class="form-group">
                <label>商品价格</label>
                <input type="text" class="form-control" v-model="goods_price" ></div>
            <div class="form-group">
                <span class="btn btn-info btn-sm" @click="add_ver()">添加版本</span>
                <!-- 一个商品有多个版本 ,不同的版本是不同的价格 -->
                <!-- 一个版本有多个颜色,不同的颜色是不同的库存 -->
                <div  class="row">
                    <div v-for="(ver_item,index) in ver_list" class="col-lg-4 ver_list">
                        <div class="row">
                            <div class="col-lg-6">
                                <label>版本{{index+1}}</label>
                                <input type="text" class="form-control" v-model="ver_item.ver_name" ></div>
                            <div class="col-lg-6">
                                <label>价格</label>
                                <input type="text" class="form-control" v-model="ver_item.ver_price"></div>
                        </div>
                        <div style="padding-left: 20px;margin-top: 10px">
                            <span class="btn btn-info btn-sm" @click="add_color(ver_item)">添加颜色</span>
                            <div v-for="color_item in ver_item.color_list" class="row">
                                <div class="col-lg-6">
                                    <label>颜色</label>
                                    <input type="text" class="form-control" v-model="color_item.color"  ></div>
                                <div class="col-lg-6">
                                    <label>库存</label>
                                    <input type="text" class="form-control"   v-model="color_item.sku"  ></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="form-group">
                <!-- vue的监听点击事件怎么写?
                a/on-click
                b/v-on:click
                c/@click
                 -->
                <input type="button" value="保存数据" @click="saveInfo()" class="btn btn-info btn-lg">
                <input type="reset" class="btn btn-danger btn-lg"></div>
        </form>
        <div class="row">
            <table class="table">
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>操作</th>
                </tr>
                <!-- 对数组模型进行遍历
                    v-for="模版变量 in 数组模型"
                    v-for="(模版变量,数组的下标) in 数组模型"

                    @dblclick 双击事件 
                    focus
                    vue 自带指令 v-on v-model
                    自定义指令 :v-auto-focus 
                 -->
                <tr v-for="(info,index) in goods_list">
                    <td>{{index+1}}</td>
                    <td @dblclick="edit_name(info)">
                        <!-- 商品名称状态要和商品数据一一对应 -->
                        <input  type="text" class="form-control" v-show="info.gd_name_status" v-auto-focus="info.gd_name_status" v-model="info.gd_name" @blur="submit_name(info,index)">
                        <span v-show="!info.gd_name_status">{{info.gd_name}}</span>
                    </td>
                    <td>{{info.gd_price}}</td>
                    <td>
                        <a class="btn btn-info"  :href="'buy.html?index='+index" target="_blank">查询</a>
                        <a class="btn btn-danger" @click="delInfo(index)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        
     // 添加数据操作
     // 第一步:添加按钮监听点击事件
     // 第二步:获取表单输入框输入的值
     // 第三步:放到表格中
         // 表格中的每一行数据用以下哪种js数据类型
         // a/string 字符串
         // b/object 对象
         // c/array 数组
         // d/localStorage 本地存储
         
         // viewmodel 视图模型 (连接视图和模型的一个纽带)
         var app = new Vue({
             el:"#vue_box",
             data:{
                 // model 模型(定义数据的地方) 
                 message:'小米商城商品管理',
                 goods_name:'', //商品名称
                 goods_price:'',//商品价格
                 ver_list:[{
                     'ver_name':'',
                     'ver_price':'',
                     'color_list':[{
                         'color':'',
                         'sku':''
                     }]
                 }],//来控制版本输入框的数量 
                 // goods_list:[],//表格的商品列表
                 goods_list:JSON.parse(localStorage.getItem('goods_list')),//需要把json字符串转换数组 ,JSON.parse
             },
             watch:{
                 goods_list:function () {
                     // 它发生任何变化都需同步更新本地存储
                     // 只有添加值或者删除值
                     localStorage.setItem('goods_list',JSON.stringify(this.goods_list))
                 }
             },
             directives:{
                 'auto-focus':function (el,binding) {
                      if (binding.value == true) {
                          el.focus()
                      }
                 }
             },
             methods:{
                 saveInfo:function () { 
                     // js document.getElementById('goods_name')
                      // js 后期拓展性
                       // js 数组添加操作 push
                       //  数组.push(每一个下标的值)
                       //  var goods_list = [{gd_name:'小驴汤米',gd_price:222},{gd_name:'小驴汤米2',gd_price:222}] 
                     if (this.goods_list == null) {
                         this.goods_list = []
                     }
                     this.goods_list.push({
                         gd_name:this.goods_name, //商品名称
                         gd_price:this.goods_price, //商品价格
                         ver_list:this.ver_list,
                         gd_name_status:false //商品名称的编辑状态,默认不显示输入框
                     })
                     console.log(this.goods_list)

                     // 数组类型:值是一个对象,它是不可以直接保存在本地存储
                     // 数组转换为json 字符串 :JSON.stringify()
                     // json 即:[{"gd_name":"小驴汤米1","gd_price":"666"},{"gd_name":"小驴汤米2","gd_price":"999"}]
                 
                     // localStorage 本地存储内容
                     // setItem 添加一个内容,第一个参数:要保存的名字,相当于仓库名;第二个参数:具体的值,如果是数组就需转换为json字符串
                     
                     // getItem 获取内容
                 },
                 delInfo:function (index) {
                     // 要把当前删除的下标
                     console.log(index)
                     // 找到当前被删除的一行数据
                     // js 数组的删除操作
                     // a/ push 添加
                     // b/ unshift 给数组的前面添加一个元素
                     // c/ shift 移除一个后面的一个元素
                     // d/ splice 删除 (第一个参数:下标,第二个参数:下一个下标/长度)
                     this.goods_list.splice(index,1)

                     // 商品列表保存在以下哪个模型中?
                     // a/ goods_list
                     // b/ gd_name
                     // c/ gd_price
                     
                 },
                 edit_name:function (info) {
                     // 改变的是当前那一行商品的状态
                      info.gd_name_status = true
                 },
                 submit_name:function (info,index) {
                     // 商品名称编辑后的提交操作
                     // 复原
                     info.gd_name_status = false
                     // console.log(info)
                     // 把商品名称,编辑  
                     localStorage.setItem('goods_list',JSON.stringify(this.goods_list))
                      
                 },
                 add_ver:function () {
                     this.ver_list.push({
                         'ver_name':'',
                         'ver_price':'',
                         'color_list':[{
                             'color':'',
                             'sku':''
                         }]
                     })
                 },
                 add_color:function (ver_item) {
                     ver_item.color_list.push({
                         'color':'',
                         'sku':''
                     })
                 }
             }
         })
          // viewmodel
    </script>
</body>
</html>
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路