7.vue 侦听器和(Class 与 Style 绑定)

最新推荐文章于 2024-04-12 04:42:40 发布

7TribeZ

最新推荐文章于 2024-04-12 04:42:40 发布

阅读量1k

点赞数 1

分类专栏： VUE 文章标签： vue js

本文链接：https://blog.csdn.net/wildand/article/details/108356260

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{msg}}</h1>
			<h2>{{reverseMsg}}</h2>
			<ul>
				<li v-for ="item in arr">{{item}}</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					msg:"hello vue",
					arr:['小明','小红','小黑']
				},				
				computed:{						
					reverseMsg:{
						get:function(){
							return this.msg.split("").reverse().join("")
						},	
						set:function(value){
							console.log(value)
							this.msg=value.split("").reverse().join("")
						}
					}
				},				
				watch:{
					msg:function(val){
						console.log("监听事件触发---msg")
						// val是修改后的值
						console.log(val)  
					},
					arr:function(val){
						console.log("监听事件触发---arr")
						this.msg="监听事件触发---arr"
						console.log(val) 
					}
				}
			})
		</script>
	</body>
</html>

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">	
			.page{
				width: 200px;
				height: 200px;
				background:skyblue;
				display: none;
			}
			.active{
				display: block;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8">	</script>
	</head>
	<body>
		<div id="app">
			<!-- <div class="page">
				
			</div> -->
			<!-- 会对原有的属性进行拼接，例如这里的page类 -->
			<!-- 通过对象的方式决定是否存在某个类 -->
			<div  class="page" :class="{active:isTrue}"></div>
			<!-- 直接放置对象 -->
			<div  class="page" :class="styleObj"></div>
			<!-- 放置数组 -->
			<div :class="styleArr"></div>
			<!-- 放置字符串 -->
			<div class="page" :class="styleStr"></div>
			<!-- 数组和对象混合使用 -->
			<div class="page" :class="styleArrObj" ></div>
			
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",				
				data:{
					isTrue:true,
					styleObj:{active:true,laochen:true,"col-lg-6":true},
					// 可直接用数组的方式进行添加和删除
					styleArr:['col-xs-12','red-bg'],
					styleStr:"abc cba qwer",
					styleObj:["abc",{active:true}]
				}
			})
		</script>
	</body>
</html>