Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

作者:神秘网友 发布时间:2020-09-08 13:33:49

Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

Vue之v-bind 与class、 style 、 computed 、 filters 的配合使用

v-bind是什么?

v-bind是给页面标签设置属性
缩写是 :

基本用法

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			<p :id="ids">测试</p>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					ids: 'testId'
				},
			})
		</script>
	</body>
</html>

说明:通过v-bind,将data中的值赋予给了p标签Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

class属性绑定

可以同时绑定一个或多个类

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			<p :class="[ids,ides]">测试</p>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					ids: 'testId',
					ides:'testIds'
				},
			})
		</script>
	</body>
</html>

说明:通过v-bind,将data中的值赋予给了p标签,并实现p标签多个属性的绑定
Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			<p :class="{aaa:isFalse}">测试</p>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					isFalse:'true'
				},
			})
		</script>
	</body>
</html>

说明:{aaa:isFalse} 如果isFalse如果是true,那么属性是aaa类,否则就不是aaa
Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

与computed计算的结果绑定属性

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			<p :class="computedClass">测试</p>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					ids: 'testId',
					ides: 'testIds'
				},
				computed: {
					computedClass: function() {
						// 计算过程省略,假设得出了isActive和isDanger的布尔值
						return {
							'color': 123,
							'text-danger': 321
						}
					}
				}
			})
		</script>
	</body>
</html>

说明:通过v-ding,对class的属性绑定为computed返回的数据作为他的属性
Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

style属性绑定

v-bind可以与style的属性进行绑定,注意:要在style后面加上{}

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			<p :style="{color:colors,fontSize:size+'px'}">测试</p>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					colors: 'green',
					size: 200
				},
			})
		</script>
	</body>
</html>

效果如图:Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

配合v-model实现数据绑定

<html>
	<style>
		.class1{
	  background: #444;
	  color: #eee;
	}
	</style>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			{{cssa}}
			<label for="r1">修改颜色</label><input type="checkbox" v-model="cssa" id="r1">
			<br><br>
			<div v-bind:class="{'class1': cssa}">
				文字
			</div>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					cssa: false
				}
			});
		</script>
	</body>
</html>

1、由于cssa一开始是false,所以checkbox就没有被勾选,则div的class就不是class1Vue之v-bind 与class、 style 、 computed 、 filters 的配合使
2、当checkbox被勾选后,v-model的cssa’就会变成true,那么div中的class的绑定的类就变成了class1

注意:v-bind:冒号后面是一个赋值表达式,不要理解为html代码,也就是说v-bind:class="{‘class1’: cssa}"表示这个div的属性为class,值由cssa决定,尤其是“class”字符,虽然通常情况下它就是属性名,但是不要直接理解为vue在拼接html代码。
Vue之v-bind 与class、 style 、 computed 、 filters 的配合使Vue之v-bind 与class、 style 、 computed 、 filters 的配合使

v-bind与过滤器配合使用


<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例v-bing绑定class2</title>
	</head>
	<body>
		<div id="app">
			{{cssa}}
			<a :href="cssa|testFilter">
				文字
			</a>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					cssa: "microkof.com"
				},
				filters: {
					testFilter: function(value) {
						if (!value) {
							return '';
						} else {
							return 'https://' + value;
						}
					}
				}
			});
		</script>
	</body>
</html>

Vue之v-bind 与class、 style 、 computed 、 filters 的配合使
作者:microkof
链接:https://www.jianshu.com/p/019b868c0279
来源:简书

Vue之v-bind 与class、 style 、 computed 、 filters 的配合使相关教程

  1. 使用Vue3.0收获的知识点(一)
  2. 【vue】响应式原理
  3. vue init nuxt-community/koa-template nuxt-learn 安装执行npm
  4. JVM
  5. 论文阅读Text Classfication AlgorithmsA Survey(三)
  6. 使用vue学习three.js之场景光源-点光源PointLight使用,创建点光
  7. Vue学习笔记之Webpack的plugin的应用
  8. vue选项卡 切换登录方式小案例