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. Git的一些基本用法

    本文分享自天翼云开发者社区<Git的一些基本用法>,作者:l****n 基本操作 git branch 查看当前分支 git branch -a 查看所有分支 git pull 更新当前分 ...

  2. 浅谈OpenStack（一）

    本文分享自天翼云开发者社区<浅谈OpenStack(一)>,作者:EmmaDu OpenStack刚诞生的时候比较单纯,只有计算(NASA开源)和存储(Rackspace开源)两个功能组件 ...

  3. 离线安装IDEA插件：详细步骤指南

    离线安装IDEA插件:详细步骤指南 网络环境下载插件包 访问 https://plugins.jetbrains.com/ 一.准备工作 找到可用的插件文件 访问 https://plugins.je ...

  4. HTML - 1、基础

    <!DOCTYPE html> <!-- 指定网页内容的语言 --> <html lang="en"> <head> <!-- ...

  5. 1 使用ollama完成DeepSeek本地部署

    1 ollama 1.1 什么是ollama ollama是一个开源的 LLM(大型语言模型)服务工具,用于简化在本地运行大语言模型,降低使用大语言模型的门槛,使得大模型的开发者.研究人员和爱好者能够 ...

  6. [BZOJ3771] Triple 题解

    <关于贫穷的樵夫拥有 40000 把斧头这件事>. 相当于是多项式乘法,但是得带容斥,具体自己看代码吧. #include<bits/stdc++.h> using names ...

  7. Android app：回调方式实现Service向activity传递数据

    一.开启服务的时候,如果我们是通过bindService来绑定服务并且要向服务传递数据,可以直接在Intent中设置bundle来达到效果,但是如果是我们需要从服务中返回一些数据到Activity中的 ...

  8. 浅析Bootstrap中Tab（标签页）的使用方法

    Bootstrap 导航元素使用相同的标记和基类,改变修饰的class,可以在不同的样式间进行切换如".nav-pills"(胶囊式导航)与 ".nav-tabs&quo ...

  9. PHP中处理html相关函数集锦

    1.html_entity_decode() 函数把 HTML 实体转换为字符. Html_entity_decode() 是 htmlentities() 的反函数. 例子: <?Php $s ...

  10. 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！

    前言 在人工智能技术日新月异的今天,DeepSeek-R1模型以其卓越的性能和广泛的应用场景,成为了众多用户心中的明星模型.它不仅具备强大的日常写作.翻译.问答等基础功能,更引入了独特的深度思考模式, ...