吴华锦

无人点餐收银系统-项目初始化

2019-02-22

主要功能介绍：

  1. 支持微信、支付宝、浏览器多种扫码工具扫码点餐。
  2. 支持多人扫码点餐，点餐信息通过WebSocket同步。
  3. 下单无线打印小票，后厨、服务员同时收到订单信息。
  4. 微信、支付宝在线支付，自动收银。

基础知识

Vue中v-bind是一个非常重要的绑定属性的指令，这里要讲解一下绑定class样式设置的方法。

<ul>
    <li v-for="(item,key) in dinner"
        :key="item"
        :class="{'red':key==0,'blue':key==1}">{{item}}</li>
</ul>

v-model双向绑定，多用于表单控制的交互操作。

ref用于获取DOM节点元素。

绑定事件对象：

<button @click="eventFn($event)">事件对象</button>
eventFn(e) {
e.srcElement.style.background = 'red'
}

TODOList实例

<div id="app">
    <input type="text" v-model="todo"/>
    <button @click="getAdd()" :style="{marginLeft:10+'px'}">+增加</button>
    <ul>
        <li v-for="(item,key) in list" :key="key" :style="{marginBottom:10+'px'}">{{item}}
            <button @click="getDel(key)" :style="{marginLeft:10+'px'}">-删除</button>
        </li>
    </ul>
</div>
export default {
    name: 'app',
    data() {
        return {
            todo: '',
            list: []
        }
    },
    methods: {
        getAdd() {
            this.list.push(this.todo);
            this.todo = ''
        },
        getDel(key) {
            this.list.splice(key, 1)
        }
    }
}
Tags: 前端 Vue
赏
使用微信打赏 使用支付宝打赏

雅致寓于高阁渔舟唱晚，古典悠然；
格调外发园林绿树萦绕，馥郁清香。

扫描二维码，分享此文章