第一天 vue语法学习案例

<template>
<div>
  <h1>{{num}}</h1>
  <button @click="add">+</button>
  <input type="text" size="3" v-model="num">
  <button @click="sub">-</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '1111',
      num:0,
      max:10,
      min:1,
    }
   },
  methods:{
    add(){
      if(this.num>this.max){
        this.num=this.max;
      }else{
        this.num++;
      }

    },
    sub(){
      if(this.num<this.min){
        this.num=this.min;
      }else{
        this.num--;
      }
    }
  }
}
</script>

<style lang="scss">

</style>

文章来自  www.96net.com.cn