Vue.js02

最新推荐文章于 2023-09-27 17:23:04 发布

Dreamer635

最新推荐文章于 2023-09-27 17:23:04 发布

阅读量525

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59142649/article/details/121278447

版权

一、v-bind指令

作用：动态绑定属性(可以绑定一个或多个属性，或者向另一个组件传递props值)
缩写：：
预期：any(with argument) || Object(without argument)
参数：attrOrProp(optional)

（一）v-bind的基本使用

通过Vue实例中的data绑定元素的src和href

<div id="app">
		<img v-bind:src="imgURL">//动态绑定src属性
		<a v-bind:href="aHref">百度一下</a>//动态绑定href属性
</div>
<script stc="../js/vue.js"></script>//引入Vue
<script>
		const app = new Vue({
		e1:'#app',//用于挂载要管理的元素
		data:{//定义数据
			    message:'Hello',
				imgURL:'图片的地址',
				aHref:'http://www.baidu.com',
			}
		})
</script>

注意：动态绑定src、href不可以使用mustache语法

（二）v-bind语法糖（简写方式）

<div id="app">
		<img :src="imgURL">//v-blind语法糖写法
		<a :href="aHref">百度一下</a>
</div>

（三）v-bind动态绑定class

1.对象语法：class后面跟的是一个对象

（1）直接通过{}绑定一个类

 <h2 :class="{'active':isactive}">Hello Word</h2>

（2）可以通过判断传入多个值

 <h2 :class="{'active':isactive,'line':isline}">Hello Word</h2>

（3）和普通的类同时存在，并不冲突

注：如果isactive和isline都为true,那么会有title/active/line三个类

 <h2 class="title" :class="{'active':isactive,'line':isline}">Hello Word</h2>

（4）如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

 <h2 class="title" :class="classes">Hello Word</h2>

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-bind</title>
	<style type="text/css">
		.active{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<h2 v-bind:class="{active：sactivei,line：isline}">{{message}}</h2>//v-bind绑定class
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
			const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello Vue.js',
				isactive:true,
				isline:true,
			}
		})
	</script>
</body>
</html>

2.数组语法：class后面跟的是一个数组

（1）直接通过[]绑定一个类

<h2 :class="['active']">Hello Word</h2>

（2）可以通过判断传入多个值

<h2 :class="['active','line']">Hello Word</h2>

（3）和普通的类同时存在，并不冲突

注：会有title/active/line三个类

<h2 class="title" :class="['active','line'">Hello Word</h2>

（4）如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

<h2 class="title" :class="classes">Hello Word</h2>

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-bind</title>
	<style type="text/css">
		.active{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<h2 v-bind:class="[active,line]">{{message}}</h2>
		<h2 v-bind:class="getClasses()">{{message}}</h2>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
			const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello Vue.js',
				active:'aaaa',
				line:'bbbb',
			},
			methods:{
				getClasses:function(){
					return [this.active,this.line]
				}
			}
		})
	</script>
</body>
</html>

（四）v-bind绑定style

1.对象语法

（1）格式：v-bind:style="{key(属性名):value(属性值)"

（2）style后面跟的是一个对象类型

对象的key是css属性名

对象的value是具体赋的值，值可以来自于data中的属性

<div id="app">
		//<h2 v-bind:style="{key(属性名):value(属性值)}">{{message}}</h2>
		<h2 v-bind:style="{fontSize:'50px'}">{{message}}</h2>//50px注意加单引号,否则当成一个变量解析
		<h2 v-bind:style="{fontSize:finalSize}">{{message}}</h2>
		<h2 v-bind:style="{fontSize:finalSize + 'px'}">{{message}}</h2>//表达式连接
		<h2 v-bind:style="{fontSize:finalSize + 'px',color:finalColor}">{{message}}</h2>
		<h2 v-bind:style="getStyles">{{message}}</h2>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
			const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello Vue.js',
				finalSize:'100px',
				finalSize1:100,
				finalColor:'red',
			},
			methods:{
				getStyles:function(){
					return {fontSize:this.finalSize + 'px',color:this.finalColor}
				}
			}
		})
	</script>

2.数组语法

（1）格式：v-bind:style="[baseStyle,baseStyle1]"

（2）style后面跟的是一个数组类型，多个值时以逗号进行分割

二、计算属性的基本使用

Dreamer635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js02

一、v-bind指令作用：动态绑定属性(可以绑定一个或多个属性，或者向另一个组件传递props值) 缩写：：预期：any(with argument) || Object(without argument) 参数：attrOrProp(optional)（一）v-bind的基本使用...
复制链接

扫一扫