Vue—Class与style绑定

  1. class、style都属于attribute,所以通过v-bind来绑定
  2. 针对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绑定的更多相关文章

  1. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  2. vue基础——Class与Style绑定

    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...

  3. vue 的 Class 与 Style 绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...

  4. 前端框架之Vue(4)-Class与Style绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将  ...

  5. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  6. vue中,class与style绑定

    <template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...

  7. Vue入门---属性、style和class绑定方法

    一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  10. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

随机推荐

  1. FLink13--KeyByMaxByApp

    一.依赖 https://www.cnblogs.com/robots2/p/16048648.html 二.代码 package net.xdclass.class9; import java.ut ...

  2. MAC消息认证码介绍

    此MAC是密码学概念,与计算机网络不同 为什么有了摘要算法还要有MAC 摘要算法保障的是消息的完整性 归根到底就是由H(x)来保证x的完整 那么问题来了,如果我知道你所使用的摘要算法(例如中间人攻击) ...

  3. [SCOI2016] 幸运数字 题解

    \(xor\) 最大值想到线性基,路径想到 \(lca\) 和树链剖分,由于没有修改用 \(lca\) 就可以.先用处理 \(fa\) 数组的方式处理倍增线性基(自然是得用线性基合并的),在求 \(l ...

  4. 2分钟学会 DeepSeek API，竟然比官方更好用！

    大家好,我是程序员鱼皮.最近 DeepSeek AI 太火了,效果也很强,但致命问题是 不稳定, 经常给我返回 服务器繁忙,请稍后再试,甚至让我怀疑自己被杀熟了. 也有网友说,第一次使用成功率很高,第 ...

  5. TypeError: Cannot read properties of null (reading 'level')

    一.分析问题 1.一个下拉框组件的更新由另一个下拉框组件控制被动更新列表,子级下拉框的值是由父级下拉框的值调用接口获取,每次父级下拉框值的改变都会改变子级下拉框的数据源也就是会改变子级下拉框的opti ...

  6. 【由技及道】在wsl容器中进行远程java开发【人工智障AI2077的开发日志003】

    指令接收:「需要万能开发环境」 系统警报:检测到主人即将陷入"环境配置地狱" 启动救赎协议:构建量子化开发容器 终极目标:让"在我机器上能跑"成为历史文物 需求 ...

  7. 少样本学习实战：Few-Shot Prompt设计

    让AI用最少样本学会"举一反三" 想象一下,你要教一个外星人认识地球上的动物.如果只给它看三张哈士奇的照片,它可能会认为所有四条腿的动物都叫"哈士奇".这就是A ...

  8. 【ABAQUS 二次开发笔记】输出单元刚度矩阵

    目录 相关的关键字 必须的参数 可选参数 使用关键字 输出到mtx文件 输出到dat文件 参考资料 相关的关键字 *ELEMENT MATRIX OUTPUT 此keyword用于将元素刚度矩阵和质量 ...

  9. 解决Mac M芯片 Wireshark 运行rvictl -s 后，出现Starting device failed

    前言 mac os big sur 之后,苹果系统的安全性能提升,导致 rvictl -s 创建虚拟网卡失败. $ rvictl -s 000348120-001621w21184C01E boots ...

  10. gorm中使用乐观锁

    乐观锁简介 乐观锁(又称乐观并发控制)是一种常见的数据库并发控制策略. 乐观并发控制多数用于数据竞争(data race)不大.冲突较少的环境中,这种环境中,偶尔回滚事务的成本会低于读取数据时锁定数据 ...