SOURCE

// jquery
var $totalNum = $('.jquery .total-num')
var $totalPrice = $('.jquery .total-price')

$('.jquery .num').on('input', function(){
		$totalNum.text(this.value || 0)
    $totalPrice.text(this.value * 6)
})


// Vue 
var app = new Vue({
  el: '#app',
  data: {
    num: ''
  }
})

<!-- jquery js文件引入 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<div class="jquery">
  <h1>jQuery</h1>
  <p>单价：6 元</p>
  <p>数量：<input type="text" class="num"/></p>
  <p>结果：总共<span class="total-num">0</span>份，合计<span class="total-price">0</span>元</p>
</div>

<!-- vue js文件引入 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<div class="vue" id="app">
  <h1>Vue</h1>
  <p>单价：6 元</p>
  <p>数量：<input type="text" v-model="num"/></p>
  <p>结果：总共<span class="total-num">{{num || 0}}</span>份，合计<span class="total-price">{{num * 6}}</span>元</p>
</div>

body {
  font-size: 14px;
}

h1 {
  font-size: 32px;
  font-weight: normal;
  border-left: 3px solid #2795EE;
  padding-left: 15px;
}


/* p{
  border-left: 2px solid #2795EE;
  padding-left: 10px;
}
 */
input {
  border: none;
  background: none;
  border-bottom: 1px solid #2795EE;
  outline:none;
}