# 插值深入學習
插值 ，其實就是`{{}}`語法，又稱`mustache`語法`[?m?st??]`。本義 胡須。
插值語法，其實就是`{{}}`內部可以書寫js的簡單操作，其實也就是相當于js的表達式。加減乘除，數組操作，函數執行等。
## 簡易購物車
簡易購物車，這里面只是為了體驗一下插值語法，
要注意，我們在進行加減乘除時候這里面的通過表單設置的數據都是字符串要乘以1，再進行加減乘除運算才好。也可以通過其它方式。`v-model.number`強制修改成為數字。
```html
<link rel="stylesheet" href="bootstrap.min.css">
<div class="container" id="app">
<div class="table">
<table class="table">
<thead>
<tr>
<th>商品信息 </th>
<th>單價</th>
<th>數量</th>
<th>運費</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="cart.png" alt=""></td>
<td><input type="number" v-model="price"></td>
<td><input type="number" v-model="num"></td>
<td><input type="number" v-model="trans"></td>
<td>￥ {{ price*num + trans*1 }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
price:15,
num:1,
trans:5
}
})
</script>
```
## 進階(了解)
如果要糾結于這個結構不夠完美，那么可以把表達式/插值語法改的更完美一些。后面會有更好的方法幫助我們去學習。
```
<td>￥ {{ price*num + (num*1>0?trans*1:0) }}</td>
```
