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 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
随机推荐
- 最佳产品奖，TeleDB拿下！
近日,第十三届PostgreSQL技术大会在杭州举行.本次大会以"聚焦云端创新,汇聚智慧共享"为主题,行业大咖.学术精英.技术专家和技术爱好者齐聚一堂,共同探讨数据库领域的发展趋势 ...
- 大模型背后的向量魔法：Embedding技术初探
本文原本是2022年写的,然而一直没有完善,自从LLM火起来之后,NLP领域的技术更新很快,本文只是大概介绍了Embedding相关的基础知识,具体应用接下来会在博客更新发布. 前言 又是很长一段时间 ...
- JMeter组件的执行顺序和作用域
组件介绍 测试计划:jmeter的起点和容器 线程组:代表一定的虚拟用户 取样器:发送请求的最小单元 逻辑控制器:控制组件的执行顺序 前置处理器:在请求之前的操作 后置处理器:在请求之后的操作 断言: ...
- 开源接流：一个方法搞定3D地图双屏联动
老大提需求:一份数据,在2D地图上可编辑,在3D地图上显示高度信息,关键是两个地图得支持视图同步,末了还来句"两天时间够了吧?"我饶了饶头,内心各种问候...,代码如何下手,特X的 ...
- Linux mint的hadoop安装方法
参考网址http://www.powerxing.com/install-hadoop/ 1.创建hadoop账户 这条命令创建了可以登陆的 hadoop 用户,并使用 /bin/bash 作为 sh ...
- Flink程序异常--CommunicationsException: The last packet successfully received from the server was
一.异常截图 com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: The last packet successfully receive ...
- C#/.NET/.NET Core技术前沿周刊 | 第 25 期（2025年2.1-2.9）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- 松下机器人示教器AUR01062触摸无反维修
Panasonic松下机器人示教器AUR01062触摸无反应解决方案 松下机器人示教器现象:触摸屏幕时鼠标箭头无任何动作,没有发生位置改变. 原因:造成此现象产生的原因很多,下面就松下机器人维修中示教 ...
- EasyExcel合并行处理并优化
业务场景 由于业务需要导出如下图中订单数据和订单项信息,而一个订单对应多个订单项,所以会涉及到自定义合并行 1.简单处理项目使用的EasyExcel,经查找发现Excel种有个AbstractMerg ...
- docker部署codegeex4实现本地IDE编程助手
实现了使用docker运行的ollama作为VSC或者其他IDE的编程助手,实现本地化的AI推理 环境 debian12 docker ollama 环境配置 ollama 参考 ollama在doc ...