Vue

HTML

<div id="app">
  <div v-for="item in items">
    {{item.name}} : {{ item.price }} × {{ item.quantity }} =
    {{item.total}}
    <button @click="calc(item)">=</button>
    <button @click="inc(item)">+</button>
    <button @click="dec(item)">-</button>
    <span :class="hasError(item)" v-if="!canBuy(item)">買えません</span>
    
    <div>hasError: {{hasError(item)}}</div>
    <div>canBuy: {{canBuy(item)}}</div>
  </div>
</div>

CSS

.error {
  color: red;
}

Vue

new Vue({
  el: "#app",
  data: {
    items: [
 			{
          name: "鉛筆",
          price: 300,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },
        {
          name: "ノート",
          price: 400,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },
        {
          name: "消しゴム",
          price: 500,
          quantity: 0,
          total: 0,
          totalTax: 0,
        },    
    ]
  },
  computed: {
    canBuy () {
      return function (item) {
        return item.total > 1000
      }
    },
    hasError () {
    	return function (item) {
        return { error: !this.canBuy(item) }
      }
    }
  },
  methods: {
    calc (item) {
      item.total = item.price * item.quantity
    },
    inc (item) {
      item.quantity++
    },
    dec (item) {
      item.quantity--
    }
  }
})