四、Vue中的样式绑定

最新推荐文章于 2024-06-19 21:36:07 发布
最新推荐文章于 2024-06-19 21:36:07 发布
阅读量177 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40990854/article/details/89070057
版权

Vue 中的样式绑定分为两种

  • class
    • 以对象的形式，给对应的字段名指定 相应的类名
    • 以数组的形式，往该数组中添加 想要设置 成为的类
  • style
    • 以对象的形式，给这个对象设置CSS 样式，相当于 写CSS 样式一样
    • 以数组的形式，直接往数组中增删 相应的样式
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue中的样式绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<style type="text/css">
		.actived{
			color: red;
		}
	</style>
</head>
<body>
	<!-- 
		1、:class={actived:isActived}	class 对象绑定  
		2、:class='[actived]'
		3、:style="styleObj"
		4、:style="[styleObj]"
	-->

	<div id="app">
		<div 
			@click='handleDivClick'
			:style="styleObj"
		>
			Hello World
		</div>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				isActived:true,
				actived:'',
				styleObj:{
					color:'red',
				}
			},
			methods:{
				handleDivClick:function () {
					this.styleObj.color = this.styleObj.color === 'red' ? 'black' : 'red';
				}
			}
		});
	</script>

	<!-- <div id="app">
		<div 
			@click='handleDivClick'
			:class='[actived]'
		>
			Hello World
		</div>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				isActived:true,
				actived:''
			},
			methods:{
				handleDivClick:function () {
					this.actived = this.actived === 'actived' ? '' :  'actived';
				}
			}
		});
	</script> -->
</body>
</html>
SmithJun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue绑定内联样式问题
10-17
其中，Vue绑定内联样式是用于动态地将样式应用于组件或元素的一种功能，这在需要根据数据变化来改变元素外观时非常有用。下面我们将深入探讨Vue绑定内联样式的相关知识。 1. **使用v-bind:style** - Vue 提供了 `v...
Vue.js样式动态绑定实现小结
01-21
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结： 动态切换的核心思想： 利用vue指令v-bind来实现动态...
vue实现条件判断动态绑定样式的方法
10-17
今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE Class列表样式数绑定案例
大家好，我是+V
07-27 344
VUE Class列表样式数绑定案例 Class 与 Style 绑定 v-bind 通过class列表和style指定样式是数据绑定的一个常见需求，他都是元素属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象 或 数组。 语法格式 class 的表达式可以为： v-bind:class = '表达式' 或者 :class = '表达式' 字符串 :class = "activeClass" 对象 :class = "{ active : isActive , err
【VUE-学习04】class对象绑定
六碗铁biu_ 的博客
08-19 148
使用[] 绑定的是变量，{}绑定数据 <!-- class对象绑定 20190819 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
vue 绑定样式的几种方式
weixin_30726161的博客
03-14 320
vue 绑定样式 对象语法 1.v-bind:class设置一个对象，动态切换class <div :class="{'active':isActive}">xxx</div> 样式是否起作用，根据isActive的布尔值是否为true 2.:class可以和class共存 <div class="static" :class="{'...
vue中样式的书写(绑定内联样式)
imkaifan的博客
03-02 684
vue的内联样式也分为对象语法和数组语法。 无论是哪一种绑定class也好，绑定内联也好，他们的样式都有对象或者数组之分 数组或者对象的关隘在运用了vue中的data进行了一个中转：也就是达到数据驱动视图的目的 注意： v-bind：style的语法外观虽然和css语法极其的相似，其实是作为javascript对象存在的。命名的时候用驼峰命名法，如果用短横线命名法的话，需要用引号括起来命名 1、对象语法 //一种： <div v-bind:style="{ color: activeColor, fo
Vue｜样式绑定
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
03-21 1754
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
Vue中动态绑定class样式
RayShyy的博客
10-19 7514
绑定的样式个数不确定（可以添加或删除任意一个class），名字也不确定。要绑定的样式个数确定，名字也确定，但是要动态决定是否使用。一个元素绑定多个class，点击添加或删除class。有两个class样式，第一个使用，第二个不使用。样式的类名不确定，需要动态指定。点击一个元素更改其绑定的类名。
Vue中CSS动态样式绑定
最新发布
警警的博客
06-19 451
在 Vue 中，你不能直接在 CSS 中直接绑定data中的数据，因为 CSS 不是响应式的。你可以使用:style绑定来动态地设置元素的样式。如果你需要根据多个数据属性来计算样式，可以使用计算属性来返回对象，并使用:class绑定。你也可以直接绑定到预定义的 CSS 类名。
Vue 样式绑定的实现方法
10-17
Vue.js 是一个流行的前端框架，它的核心特性之一就是数据绑定，其中包括样式绑定。Vue 提供了灵活的方式来操作元素的 `class` 列表和 `style` 内联样式，使得动态响应式的界面设计变得简单易行。在Vue中，我们可以...
vue 动态绑定背景图片的方法
10-18
对于如何在Vue项目中实现这些功能，开发者应首先熟悉Vue的基本概念，如组件、数据绑定、指令等。对Vue文档的阅读将有助于开发者深入理解这些概念和方法。在实践中，建议多利用Vue DevTools等开发工具来检查组件的...
在CSS中定义A:active/A:link/A:visited/A:hover顺序
weixin_34389926的博客
09-18 494
以前用CSS一直没有遇到过这个问题，在最近给一个本科同学做的项目里面。出现一些问题，搜索引擎查了一些网站和资料，发现很多人问到这个问题，给出的结果我试了试，大部分都不正确。 给出我试的顺序，可能会对大家有一些帮助： A:link {color: #000000;TEXT-DECORATION: none}A:visited {COLOR: #000000; ...
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
热门推荐
manba
03-31 1万+
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX和pageY： 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
CSS,font-family,好看常用的中文字体
manba
03-04 1万+
例1（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3（加网 ）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5...
getComputedStyle方法 获取元素CSS值
manba
03-30 3093
一、getComputedStyle 介绍 getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 getComputedStyle() gives the final used values of all the CSS properties of an element...
padding,margin带一个、二个、三个、四个参数的不同含义
manba
03-14 3031
margin ： padding：
在手机上查看电脑端开发的网页，（可使用IIS或tomcat，特别注意防火墙、IP地址、局域网的相关知识或使用方法）
manba
01-20 1976
这里的使用的两种方法，经过我的亲身经历，发现必须在防火墙关闭下才可以 一、第一种 是使用 llS手机访问电脑服务器上的网页，在电脑上访问的是（localhost:8848/Try/Delete.html） 1、开启电脑热点 2、查看Wifi 密码 3、手机连上这个热点 4、Windows + R 调出 DOS ，输入 ipconfig 来获取IPv4地址 5、用手机访问...
九、Vue中使用插槽（slot）、聚类插槽
manba
04-09 1792
文章目录一、基本的插槽二、聚类插槽这个是普通插槽的Demo这个是聚类插槽的Demo 一、基本的插槽 这里总结两点 如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示 （插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表 父组件往子组件中 插入的标签 这里就代表 组件子组件中的 <p>Dell</p&...
vue中动态绑定style
03-30
在Vue中，可以使用动态绑定style来实现样式的动态变化。动态绑定style可以通过以下几种方式实现： 1. 对象语法： 可以通过在data中定义一个对象，然后将该对象绑定到元素的style属性上。对象的属性名为CSS属性，属性值为对应的样式值。当对象中的属性值发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="styleObject"></div> </template> <script> export default { data() { return { styleObject: { color: 'red', fontSize: '20px' } } } } </script> ``` 2. 数组语法： 可以通过在data中定义一个数组，然后将该数组绑定到元素的style属性上。数组中的每个元素都是一个对象，对象的属性名为CSS属性，属性值为对应的样式值。当数组中的元素发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="styleArray"></div> </template> <script> export default { data() { return { styleArray: [ { color: 'red' }, { fontSize: '20px' } ] } } } </script> ``` 3. 绑定计算属性： 可以通过定义一个计算属性来返回一个样式对象，然后将该计算属性绑定到元素的style属性上。当计算属性的返回值发生变化时，元素的样式也会相应地更新。 示例代码： ```html <template> <div :style="computedStyle"></div> </template> <script> export default { data() { return { color: 'red', fontSize: '20px' } }, computed: { computedStyle() { return { color: this.color, fontSize: this.fontSize } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值