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}"/>

相关推荐

  1. Vue指令v-bind

    2024-01-26 16:22:02       33 阅读
  2. 第3节:Vue3 v-bind指令

    2024-01-26 16:22:02       37 阅读
  3. Vue指令介绍

    2024-01-26 16:22:02       15 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-26 16:22:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-26 16:22:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-26 16:22:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-26 16:22:02       18 阅读

热门阅读

  1. ES6详解

    ES6详解

    2024-01-26 16:22:02      26 阅读
  2. 【硅谷甄选】强制使用 pnpm 包管理器工具

    2024-01-26 16:22:02       33 阅读
  3. (Unity) C# 中的as 关键字

    2024-01-26 16:22:02       35 阅读
  4. 全网最全 MySQL EXPLAIN 完全解读

    2024-01-26 16:22:02       29 阅读
  5. Spring和 Springboot的区别你了解吗

    2024-01-26 16:22:02       36 阅读
  6. vue3基础

    2024-01-26 16:22:02       22 阅读
  7. springboot中使用easyExcel读取excel中的内容

    2024-01-26 16:22:02       30 阅读