当前位置:网站首页>v-bind指令:设置元素的属性
v-bind指令:设置元素的属性
2022-08-10 16:24:00 【爱雨天】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="":title="imgTitle+'!!!'":class="isActive?'active':''"@click="toggleActive">
<br>
<img :src="imgSrc" alt="":title="imgTitle+'!!!'":class="{active:isActive}"@click="toggleActive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>
边栏推荐
猜你喜欢
随机推荐
MySQL数据库完全备份与增量备份怎么实现
MySQL command line export import database
拆分整数为2的幂次项和 → 理解多重背包问题二进制优化的核心思想
蓝桥ROS之 cmake gcc g++ 默认版本和升级
积分可以当钱用,阿里推出个人「碳账户」
玩转Redis|学会这10点让你分分钟拿下Redis,满足你的一切疑问
接口测试中,应不应该用数据库
glut库更新旧程序无法完成编译问题描述
烟雾、空气质量、温湿度...自己徒手做个环境检测设备
8月Meetup | “数据调度+分析引擎”解锁企业数字化转型之路
64位 RT-Thread 移植到 Cortex-A53 系统 bug 修复笔记
Exchange Online审计和监控
2022年软考复习笔记一
C专家编程 第10章 再论指针 10.8 轻松一下---程序检验的限制
MySQL-创建、修改和删除表
Mastodon:可创建类似推特的开源社交网络服务器
解决mpi4py导入报错ImportError: libmpi.so.40: cannot open shared object file: No such file or directory
一文带你了解 HONOR Connect
秘密共享方案介绍SS
MySQL数据库命令