Note 组件，v-model

src/components/Account/Choice.vue

@@ -3,10 +3,6 @@
     <div>类别</div>
     <ul>
       <li class="selected">默认</li>
-      <li>衣</li>
-      <li>食</li>
-      <li>住</li>
-      <li>行</li>
     </ul>
   </div>
 
@@ -15,8 +11,15 @@
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
+  import store from '@/store';
   
-  @Component
+  @Component({
+    computed:{
+      labelList(){
+        return store.state.labelList
+      }
+    }
+  })
   export default class Choice extends Vue {
     
   }

src/components/Account/Note.vue

@@ -1,7 +1,9 @@
 <template>
     <label>
+      {{value}}
       <span>备注</span>
-      <input type="text" placeholder="在这里添加备注">
+      <input type="text" v-model="value"
+             placeholder="在这里添加备注">
     </label>
 </template>
 
@@ -11,7 +13,7 @@
   
   @Component
   export default class Note extends Vue {
-    
+    value = '';
   }
 </script>
 

src/components/Account/Show.vue

@@ -1,17 +1,24 @@
 <template>
   <div class="show">
     <div class="text">金额</div>
-    <div class="number">100.12</div>
+    <div class="number">{{output}}</div>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
+  import personStore from '@/store/personStore'
   
-  @Component
+  @Component({
+    // todo
+    computed:{
+      output(){
+        return personStore.output;
+      }
+    }
+  })
   export default class Show extends Vue {
-    
   }
 </script>
 

src/components/Account/Write.vue

@@ -1,29 +1,43 @@
 <template>
   <div class="buttons">
-    <button>1</button>
-    <button>2</button>
-    <button>3</button>
-    <button>删除</button>
-    <button>4</button>
-    <button>5</button>
-    <button>6</button>
-    <button class="clear">清空</button>
-    <button>7</button>
-    <button>8</button>
-    <button>9</button>
+    <button @click="inputContent">1</button>
+    <button @click="inputContent">2</button>
+    <button @click="inputContent">3</button>
+    <button @click="remove">删除</button>
+    <button @click="inputContent">4</button>
+    <button @click="inputContent">5</button>
+    <button @click="inputContent">6</button>
+    <button @click="empty">清空</button>
+    <button @click="inputContent">7</button>
+    <button @click="inputContent">8</button>
+    <button @click="inputContent">9</button>
     <button class="ok">确认</button>
-    <button class="zero">0</button>
-    <button>.</button>
+    <button @click="inputContent" class="zero">0</button>
+    <button @click="inputContent">.</button>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
+  import personStore from '@/store/personStore';
+
   @Component
   export default class Write extends Vue {
+    remove(){
+      // todo
+      personStore.remove();
+      console.log(personStore.output)
+    }
+    empty(){
+      personStore.empty();
+      console.log(personStore.output)
 
+    }
+    inputContent(event: MouseEvent){
+      personStore.inputContent(event);
+      console.log(personStore.output)
+    }
   }
 </script>
 

src/components/Type.vue

@@ -1,17 +1,24 @@
 <template>
   <ul>
-    <li class="selected">支出</li>
-    <li>收入</li>
+    <li :class="{selected: type==='+'}" @click="selectA">支出</li>
+    <li :class="{selected: type==='-'}" @click="selectB">收入</li>
   </ul>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
+
   @Component
-  export default class Top2 extends Vue {
-    
+  export default class Type extends Vue {
+    typeList=['+','-'];
+    type='+';
+    selectA(){
+      this.type=this.typeList[0]
+    }
+    selectB(){
+      this.type=this.typeList[1]
+    }
   }
 </script>
 

src/main.ts

@@ -6,6 +6,8 @@ import store from './store';
 import Nav from '@/components/Nav.vue';
 import Top from '@/components/Top.vue';
 import Layout from '@/components/Layout.vue';
+import personStore from '@/store/personStore';
+
 
 Vue.config.productionTip = false;
 Vue.component('Top',Top);

src/store/index.ts

@@ -1,15 +1,23 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from 'vue';
+import Vuex from 'vuex';
 
-Vue.use(Vuex)
+type LabelList = {
+  labelList: string[];
+}
 
-export default new Vuex.Store({
-  state: {
+Vue.use(Vuex);
+const store =  new Vuex.Store({
+  state:{
+    labelList:['默认','衣','食','住','行']
   },
   mutations: {
-  },
-  actions: {
-  },
-  modules: {
+    addLabel(state){
+      state.labelList.push('彩票')
+    }
   }
-})
+});
+
+store.commit('addLabel');
+
+export default store
+

src/store/personStore.ts

@@ -0,0 +1,30 @@
+const store =  {
+  output: '124',
+  fetchOutput() {
+    return this.output;
+  },
+  remove(){
+    if(this.output.length<=1){
+      this.output = '0';
+    }else{
+      this.output = this.output.slice(0,-1)
+    }
+  },
+  empty(){
+    this.output = '0';
+  },
+  inputContent(event: MouseEvent){
+    const input = (event.target as HTMLButtonElement).textContent as string;
+    if(this.output.length<=16){
+      if(this.output ==='0' && input !=='.'){
+        this.output = input;
+      }else{
+        if(this.output.indexOf('.')>=0 && input ==='.'){
+          return
+        }
+        this.output += input;
+      }
+    }
+  }
+};
+export default store

src/views/Account.vue

@@ -3,7 +3,7 @@
       <Type/>
       <Choice/>
       <Note/>
-      <Show/>
+      <Show @ok="onOutputChange"/>
       <Write/>
     </Layout>
 </template>
@@ -17,11 +17,15 @@
   import Write from '@/components/Account/Write.vue';
   import Show from '@/components/Account/Show.vue';
 
+
   @Component({
-    components: {Show, Write, Note, Choice, Type}
-  })
+    components: {Show, Write, Note, Choice, Type},
+  },)
   export default class Account extends Vue {
-    
+    output='0';
+    onOutputChange(){
+      console.log("检测到 output 变化啦")
+    }
   }
 </script>