# 插值深入学习
插值 ，其实就是`{{}}`语法，又称`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>
```
