vue绑定属性、绑定class及绑定style
2024-09-03 22:38:12
1.绑定属性 v-bind 或者 ： 例如：<img :src="pic_src" />
<template>
<div id="app">
<img :src="pic_src" />
</div>
</template> <script>
export default {
name: "app",
data() {
return {
pic_src: "https://cn.vuejs.org/images/logo.png", };
}
};
</script> <style>
</style>
2.绑定class <div :class="{'red':active}">111111111111</div>
<template>
<div id="app">
<img :src="pic_src" />
<hr/>
<div :class="{'red':active}"></div>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
pic_src: "https://cn.vuejs.org/images/logo.png",
active: true
};
}
};
</script> <style>
.red {
color: red;
}
</style>
3.绑定style <div :style="{color:color}">2222222222</div>
<template>
<div id="app">
<img :src="pic_src" />
<hr/>
<div :class="{'red':active}"></div>
<hr/>
<div :style="{color:color}"></div>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
pic_src: "https://cn.vuejs.org/images/logo.png",
active: true,
color:'blue'
};
}
};
</script> <style>
.red {
color: red;
}
</style>
最终页面效果：
最新文章
- MySql - InnoDB - 事务 , Php版
- Mongodb 学习笔记
- 安装、部署... Windows服务 .net程序 安装 命令
- 前端页面div float 后高度 height 自适应的问题
- Spring切入点表达式常用写法
- Linux基本命令（5）管理使用者和设立权限的命令
- CLR.via.C#第三版 读书笔记
- phpcms V9 首页模板文件解析(转）
- HTML与JS
- 三大框架之hibernate
- 【转】CSS
- html中submit和button的区别(总结) [ 转自欣步同学 ]
- Gradle 1.12用户指南翻译——第三十四章. JaCoCo 插件
- java中“==”和equals方法的区别，再加上特殊的String引用类型
- hibernate批量删除写法
- HTML5触摸事件(touchstart、touchmove和touchend)
- MapReduce详解及shuffle阶段
- 算法笔记_043:最大连续子数组和（Java）
- IE下使用jquery失效的问题（转载）
- ActiveMQ 性能调优