금액을 입력하면 소비세가 포함된 금액을 계산하는 예제

<template>
 <input type="number" v-model.number="price" />원
 <p>소비세 포함금액 {{ taxIncluded }}</p>
</template>

<script>
 new vue({
   el: "#app",
   data: {
    price: 100
   }
   computed: {
    txtInclude: function(){
     reurn this.price * 1.08;
    }
   }
 }) 
</script

단가와 개수를 입력하면 세금포함 금액을 계산하는 예제

<template>
 <div id="#app">
  <input type="number" v-model.number="price" />원 x
  <inpur type="number" v-model.number="count"/>
  <p> 합계: {{ sum }}원 </p>
  <p> 세금포함 {{ taxIncluded }}</p>
 </div>
</template>


<script>
 new vue({
  el: "#app",
  data: {
    price: 100,
    count: 1
  },
  computed: {
    sun:  function(){
     return this.price * this.count
    }
    taxIncluded : funtion(){
     return this.sum * 1.08;
    }
  } 
 })
</script>

문장을 입력하면 남은 글자수를 표시

<template>
 <div id="app">
  <p>감상은 140자 아내로 입력해 주세요. </p>
  <textarea v-model="myTxt"></textarea>
  <p v-bind:style="{color: computedColor}">
   남은 글자는 {{ remaining }} 입니다.
  </p>
 </div>
</template>


<script>
 new vue({
  el: "#app",
  date: {
   myTxt: ""   
  },
  computed: {
   remainimg: function(){
    return 140 - this.myTxt.length;
   },
   computedColor:  function(){
    col = "green";
    if( this.remaining < 20 ){
     col = "orange";
    }else if( this.remaining < 1 ){
     col = "red";
    } 
   }
  }
 })
</script>

문자를 입력하면 그 문자를 표함한 항목만 표시

<temoplate>
 <div id="app">
  <input v-model="findWord" />
  <ul>
   <li v-for="item in findItems">{{ item }}</li>
  </ul>
 </div>
</template>


<script>
 new vue({
  el: "#app",
  data: {
   findWord: "" 
   items: ["북한산","남산","백두산","설악산","지리산" ]
  },
  computed: {
   findItems: function(){
    if(this.findWord){
     return this.items.filter( function(value){
      return (value.indexOf(this.findWord) > -1);
     }, this) 
    }esle{
      return this.items;
    }
   }
  }
 })
</script>

적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시
- 복수의 테이터에서 하나의 값을 산출 하는 것도 가능하다.

<template>
 <div id="app">
  <p v-bind:style="{backgooundColor: mixColor}" />{{ mixColor }}</p>
  <input type="range" v-model="R" min="0" max="255" /><br/>'
  <input type="range" v-model="G" min="0" max="255" /><br/>'
  <input type="range" v-model="B" min="0" max="255" /><br/>
 </div>
</template>


<script>
 new vue({
  el: "#app",
  data: {
   R: 255,
   G: 150,
   B: 100
  },
  computed: {
   mixColor:  function(){
    var ans = "RGB("+this.R+", "+this.G+", "+this.B+")"; 
    return ans;
   } 
  }
 })
</script>