vue第八周上午第二次课

computed 计算属性

• 当计算属性依赖的数据发生变化时，这个属性的值也会自动更新
• 每个计算属性都包含一个 getter 和 setter
• 默认使用 getter 来读取数据
• 执行 Setter，当手动更新计算属性的值，就会触发 setter

结账小票前端代码

<div id="app">
			<div class="container">
				<div class="row">
					<div class=";col-4">商品名称</div>
					<div class=";col-3">单价</div>
					<div class=";col-2">数量</div>
					<div class=";col-3">价格</div>
				</div>
				<div class="row" v-for="item in products">
					<div class="col-4">{{item.name}}</div>
					<div class="col-3">{{item.price | two}}</div>
					<div class="col-2">{{item.count}}</div>
					<div class="col-3">{{item.price*item.count | two}}</div>
				</div>
			</div>
			<p>总价：{{newstr}}</p>
		</div>

结账小票代码

<script>
			var vm01 = new Vue({
				el:"#app",
				data:{
					products:[
						{name:"血糖",price:12.1,count:3},
						{name:"旺仔",price:3,count:6},
						{name:"饼干",price:12.23,count:4}
					]
				},
				// 计算属性
				computed:{
					newstr:function(s){
						var total = 0
						this.products.forEach(function(s){
							total += (s.price*s.count)
						})
						return total
					},
				},
				// 局部过滤器
				filters:{
					two:function(value){
						return value.toFixed(2)
					}
				}
			})
<script>

computed 计算属性的 getter 和 setter

var vm02 = new Vue({
				el:".box",
				data:{
					firstName:"徐",
					lastName:"君选",
					msg:"",
					time:"当前时间"
				},
				computed:{
					fullName:{
						// getter
						get:function(){
							return this.firstName+this.lastName
						},
						// setter
						set:function(value){
							this.firstName = value.substr(0,1)
							this.lastName = value.substr(1)
						}
					},
					getCurrentTimeC:function(){
						var h = new Date().getHours()
						var m = new Date().getMinutes()
						var s = new Date().getSeconds()
						return this.time+h+"小时"+m+"分钟"+s+"秒"
					}
				},
				methods:{
					getCurrentTime:function(){
						var h = new Date().getHours()
						var m = new Date().getMinutes()
						var s = new Date().getSeconds()
						return this.time+h+"小时"+m+"分钟"+s+"秒"
					}
				}
			})
			vm02.fullName = "成统统";

watch （监听器）

人民币转卢布

var vm04 = new Vue({
				el:".box4",
				data:{
					rmb:0,
					lubu:0,
					rate:14.1618
				},
				watch:{
					rmb:function(val){
						this.lubu = val * this.rate
					},
					lubu:function(val){
						this.rmb = val / this.rate
					}
				},
				filters:{
					fournum:function(val){
						return val.toFixed(4)
					}
				}
			})

统计鼠标点击按钮次数

鼠标改变图片透明度