Vue计算属性与监听属性的运用

！！这里的事件监听的数据是数组或者对象的话，回调函数中的新值和旧值是相等的，因为这两个形参指向的是同一个数据对象。

1、认识计算属性（过滤器的使用）

• 这里的计算属性是要定义在computed的选项中，当计算属性依赖的数据发生变化的时候，这个属性的值会自动更新，所有依赖该属性的数据绑定也会同步进行更新。
• 这里的代码中有过滤器filters 的使用，过滤器会按第一个方法一个一个按顺序都运行一遍。
• totalprice：这是一个数据属性，通常定义在 Vue 实例的 data 对象中，表示某个商品或订单的总价。
• |：这是 Vue.js 中的过滤器语法，用于将 totalprice 的值传递给过滤器函数 formatPrice。
• formatPrice("¥")：这是一个过滤器函数，接受 totalprice 作为输入，并返回格式化后的价格字符串。"¥" 是传递给 formatPrice 函数的参数，表示货币符号。

<div id="example">
	<div class="title">
		<div>商品名称</div>
		<div>单价</div>
		<div>数量</div>
		<div>金额</div>
	</div>
	<div class="content" v-for="value in shop">
		<div>{
  {value.name}}</div>
		<div>{
  {value.price | twoDecimal}}</div>
		<div>{
  {value.count}}</div>
		<div>{
  {value.price*value.count | twoDecimal}}</div>
	</div>
	<p>合计：{
  {totalprice | formatPrice("¥")}}</p>
</div>
<script type="text/javascript"