Vue应用（三）---watch、computed、绑定类、绑定样式

最新推荐文章于 2023-06-28 15:00:19 发布

hurricane_li

最新推荐文章于 2023-06-28 15:00:19 发布

阅读量793

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hurricane_li/article/details/80701245

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!-- watch侦听属性，computed计算属性，绑定class，绑定style -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<!-- watch侦听属性，虽灵活，但容易出错 -->
	<div id="app">
	  <span >Message: {{ fullName }}</span>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		     firstName: 'Foo',
		     lastName: 'Bar',
		     fullName: 'Foo Bar'
		   },
		   // 不推荐下面的写法,使用下面app2中的计算属性更合适
		  watch: {
		    firstName: function (val) {
		      this.fullName = val + ' ' + this.lastName
		    },
		    lastName: function (val) {
		      this.fullName = this.firstName + ' ' + val
		    },
		    // 使用watch要注意不要循环依赖，否则容易造成无限循环，如下
		    // fullName:function(val){
		    // 	console.log("fullName")
		    // 	var names = val.split(' ')
			   //    this.lastName = names[0]
			   //    this.firstName = names[names.length - 1]
		    // }
		  }
		})
	</script>
	<!-- computed计算属性，默认只有get方法,当get方法中的属性变动后，自动渲染自身的值 -->
	<div id="app-2">
	  <span >Message: {{ fullName }}</span>
	</div>
	<script type="text/javascript">
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		     firstName: 'Foo',
		     lastName: 'Bar'
		   },
		   computed: {
		     fullName: function () {
		       return this.firstName + ' ' + this.lastName
		     }
		   }
		})
	</script>
	<!-- computed监听属性的set与get方法。注意在set方法中，不要再对自己的属性赋值，否则会循环调用set方法，内存溢出 -->
	<div id="app-3">
	  <span>{{firstName}}</span>
	  <span>{{lastName}}</span>
	  <span>{{fullName}}</span>
	</div>
	<script>
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		    firstName: 'Foo',
		    lastName: 'Bar',
		    // fullName: 'Foo Bar'
		  },
		  computed: {
			  fullName: {
			    get: function () {
		    		console.log('get')
			    	return this.firstName + ' ' + this.lastName
			    },
			    set: function (newValue) {
			      var names = newValue.split(',')
			      this.firstName = names[0]
			      this.lastName = names[names.length - 1]
			     console.log('set')
			     // this.fullName = 'set a new value';	//这句话会导致无限循环
			    }
			  }
		  }
		})
	</script>

	<!-- vue绑定标签的class属性 -->
	<div id="app-4">
	  <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
	  <div class="static" v-bind:class="classObject"></div><!-- 绑定的数据对象不必内联定义在模板里 -->
	  <div v-bind:class="[activeClass, errorClass]"></div><!-- 这里数组的元素可以用三元表达式或者第一种对象格式替代 -->
	</div>
	<script type="text/javascript">
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		    isActive: true,
		    hasError: false,
		    classObject: {
		       active: true,
		       'text-danger': true	//改变包含特殊字符-.等时，使用app3.classObject['text-danger']=false格式修改
		       // classObject可以通过下面的方式表达为计算属性
		       // return {
	        //      active: this.isActive && !this.error,
	        //      'text-danger': this.error && this.error.type === 'fatal'
	        //    }
		    },
		    activeClass: 'active',
		    errorClass: 'text-danger'
		  }
		})
	</script>
	<!-- 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面 -->
	<div id="app-5">
	  <my-component></my-component>
	  <my-component class="new"></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component', {
		  template: '<p class="foo bar">Hi</p>'
		})

		var app5 = new Vue({
		  el: '#app-5'
		})
	</script>

	<!-- 绑定内联样式,常常结合返回对象的计算属性使用 -->
	<!-- 样式的属性名包含中要使用单引号括起来。样式中，vue的属性不能包含中划线 -->
	<div id="app-6">
	  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',margin-left: marginLeft + 'px' }">css</div>
	  <div v-bind:style="styleObject">css</div>
	</div>
	<script type="text/javascript">
		var app6 = new Vue({
		  el: '#app-6',
		  data: {
		    activeColor: 'red',
		    fontSize: 30,
		    marginLeft:20,
		    styleObject: {
				color: 'red',
				fontSize: '13px'
			}
		  }
		})
	</script>

	
</body>
</html>

hurricane_li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue应用（三）---watch、computed、绑定类、绑定样式

&lt;!-- watch侦听属性，computed计算属性，绑定class，绑定style --&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https://cdn.bootcs
复制链接

扫一扫

专栏目录