Vue常用指令v-bind

v-bind指令是专门操作属性的指令,平时经常设置图片是src,设置鼠标悬停的文本是title,还有类class等,这种就是属性。

v-bind指令的作用是为元素绑定属性
语法是v-bind:属性名
简写可以省略v-bind只保留:属性名
需要动态的添加class建议使用对象的方式

1. 如何使用v-bind指令

语法是v-bind:属性名=表达式

固定写法:

<img src="图片地址"/>

那要设置属性就是这么写(v-bind写法),图片的src属性的值就是在data中定义的imgSrc的值

<body>
		<div id="app">
			<img src="图片地址"/>
			<img v-bind:src="imgSrc"/>
		div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					imgSrc:'图片地址'
				}
			})
		script>
	body>

2. v-bind设置类名

假设img的class为active,那么使用v-bind设置类名属性,使得active生效可以利用三元表达式,如果isActive为真就设置active,如果isActive为假就设置为空。

三元表达式看起来表达式,代码有点多,还有另一种写法,对象的写法

active类名是否生效,取决于isActive的值,如果isActive为真active就生效,如果isActive为假就不生效。

  1. v-bind简写
<img :src="imgSrc"/>
<img :class="isActive?'active':''"/>
<img :class="{active:isActive}"/>

你可能感兴趣的:(vue.js,javascript,前端)