vue基础——属性绑定

最新推荐文章于 2024-05-10 18:15:56 发布

失忆症患者_

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量1.1k

点赞数 1

文章标签： vue javascript js html

本文链接：https://blog.csdn.net/qq_41929578/article/details/108912603

版权

v-bind 属性绑定

作用：动态绑定属性

bind用于绑定一个或多个属性值，比如通过Vue实例中的data绑定元素的URL，代码如下

<div id="app">
		<a v-bind:href="url">{{address}}</a>
</div>
<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					url:"http://www.baidu.com",
					address:"百度"
				}
			})
</script>

v-bind简写 : <a :href="url">{{address}}</a>

v-bind 绑定样式

绑定class有两种方式：
对象语法
数组语法
（1）绑定方式：对象语法

对象语法的含义是:class后面跟的是一个对象。

用法一：直接通过{}绑定一个类
:class="{'类名': 布尔值}"
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

<style>
.active {
    color:red;
}
</style>
  <script>
    var vm = new Vue({
         el: '#app',  
         data: {
         isActive: 'true',
         isLine: 'true'
      }
    })
  </script>

（2）绑定方式：数组语法

数组语法的含义是:class后面跟的是一个数组用的比较少

用法一：直接通过[]绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line' ]">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
<style>
.active {
    color:red;
}
.line {
    color:blue;
}

案例分享

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			.divv{
				width: 100px;
				height: 100px;
				border: 1px solid #FF0000;
			}
			.divvv{
				background-color: pink;
			}
		</style>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--1.样式绑定和数组绑定可以结合使用
				2.class绑定的值可以简化使用,可以通过数组
				3.默认的class如何处理
			-->
			<!--<div v-bind:class="{divv: isActive}"></div>-->
			<div v-bind:class="[div1,div2]"></div>
			<div v-bind:class="['divv','divvv']"></div>
			<!--<div v-bind:class="arr"></div>-->
			<!--<div v-bind:class="Object1"></div>-->
			<button v-on:click="qiehuan">切换</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					isActive:true,
					div1:"divvv",
					div2:"divv",
//					数组形式
					arr:['divv','divvv'],
//					对象形式
					Object1:{
						divv:true,
						divvv:true
					}
				},
				methods:{
					qiehuan:function(){
//						this.isActive = !this.isActive;
						this.div1 = "";
						this.div2 = '';
					}
				}
			})
		</script>
	</body>
</html>

失忆症患者_

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础——属性绑定

v-bind 属性绑定作用：动态绑定属性bind用于绑定一个或多个属性值，比如通过Vue实例中的data绑定元素的URL，代码如下<div id="app"> <a v-bind:href="url">{{address}}</a></div><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ url:"http:
复制链接

扫一扫