Vue(五)—Class与style绑定
Vue—Class与style绑定
- class、style都属于attribute,所以通过v-bind来绑定
- 针对class、style属性，v-bind可以通过对象或数组去指定
绑定Html Class
组件待续。。。
<body>
<div id="app4">
<!-- 通过对象 ,要灵活配置采用三元表达式-->
<div class="test" :class="{'active':isAtive,test:true,'green':isGreen}">
<span>Hello Vue</span>
</div>
<!-- 通过数组,要灵活配置采用三元表达式-->
<div id="app4" class="test" v-bind:class="['active',test,isGreen?'green':'']">
<span>Hi Vue</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app4",
data:{
isAtive:true,
isGreen:true,
test:'test'
}
});
</script>
<style>
.test{font-size:50px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
绑定Html Style
<body>
<div id="app4">
<!-- 采用单一变量（把所有的style封装到一个变量里）,单一变量记得定义成小写 -->
<div v-bind:style="newstyle">
你好 vue
</div>
<!-- 采用对象，也可用三目表达式灵活配置 -->
<div v-bind:style="{color:Color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
<!-- 采用数组 -->
<h2 :style="[baseStyle,baseStyle1]">hi vue</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app4",
data:{
Color : "#FFFFFF",
size : '50px',
isRed : true,
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'},
newstyle:{
color : 'blue',
fontSize:'50px'
}
}
});
</script>
</body>
Vue(五)—Class与style绑定的更多相关文章
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- vue 的 Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- 前端框架之Vue(4)-Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue基础---Class 与 Style 绑定
[一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...
- vue中,class与style绑定
<template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...
- Vue入门---属性、style和class绑定方法
一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
随机推荐
- 云主机AI服务的性能测试和优化
本文分享自天翼云开发者社区<云主机AI服务的性能测试和优化>,作者:无敌暴龙兽在云计算的时代,越来越多的人选择将AI模型部署在云主机上,以便利用云服务提供商的弹性和可扩展性.然而,仅仅将A ...
- oracle 删除过期归档脚本
一.定时任务 crontab -e 编辑 每周6凌晨3点执行脚本 0 3 * * 6 . /home/oracle/scripts/arch_delete_before_60days_arch.sh ...
- Spark常用Sql
一.日期处理 1.查询当前日期 SELECT current_date() 2023-12-22 2.查询当前时间戳 select current_timestamp() 2023-12-22 14: ...
- Linux环境下安装phantomjs
一.创建文件夹,用来存放软件 cd /opt/softWare mkdir phantomJS cd phantomJS 二.下载并解压 wget https://bitbucket.org/ari ...
- WinForm 进度条显示进度百分比
参考: https://blog.csdn.net/zhuimengshizhe87/article/details/20640157 WinForm中显示进度条百分比有多种方式: 1. 添加 Lab ...
- 如何使用 Uni-app 实现视频聊天（源码，支持安卓、iOS）
现在使用Uni-app开发手机端APP已经变得很普遍,同一套代码就可以打包成Android App 和 iOS App,相比原生开发,可以节省客观的人力成本.那么如何使用Uni-app来开发视频聊天软 ...
- QT5笔记：27. MDI应用程序设计
MDI:Multiple Document Interface 多窗口文档界面 例子: MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H # ...
- D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> off
D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> ...
- P11620 [Ynoi Easy Round 2025] TEST_34
由子序列和最值异或可以想到线性基 发现其实线性基满足结合律 考虑线段树进行维护 那么显然的一个想法就是把1操作直接上tag 但是发现上tag其实会丢失线性基的性质 于是差分 将区间修改变为单点修改 考 ...
- [AI/GPT/Chat2SQL/RAG] VannaAI
概述:VaanaAI 缘起 使用 AI 生成 SQL 的原因 数据仓库和数据湖在企业中广泛应用,但能够精通 SQL 并理解企业数据结构的人很少.AI 可以帮助商业用户使用自然语言查询数据库,生成 SQ ...