Vue学习笔记——v-bind

最新推荐文章于 2024-07-05 11:27:33 发布

渣渣圆

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量89

点赞数

分类专栏： Vue 文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_44154577/article/details/114380936

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-bind

作用：动态绑定数据
简写: ：

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
	<div id="app"> 
	<img v-bind:src="imgSrc" alt="大傻逼">
	<br />
	<img :src="imgSrc" :title="imgTitle+'加油呀'" :class="{active:isActive}" @click="toggleActive()">
	</div>
	<body>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
				imgSrc:"http://www.itheima.com/images/logo.png",
				imgTitle:"黑马程序员",
				isActive:false,
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>

第一张图片仅绑定了src的地址在data里面存储
第二张图片绑定了标题和样式设置一个单击事件来控制isActive的布尔值来间接控制样式
在这里插入图片描述

渣渣圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue学习笔记——v-bind

v-bind作用：动态绑定数据简写: ：demo<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ b
复制链接

扫一扫