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

主要功能介绍：

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

基础知识

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

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

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

ref用于获取DOM节点元素。

绑定事件对象：

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

TODOList实例

1
2
3
4
5
6
7
8
9
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
    name: 'app',
    data() {
        return {
            todo: '',
            list: []
        }
    },
    methods: {
        getAdd() {
            this.list.push(this.todo);
            this.todo = ''
        },
        getDel(key) {
            this.list.splice(key, 1)
        }
    }
}