vue 添加样式分几种方法

最新推荐文章于 2024-04-20 08:47:50 发布
最新推荐文章于 2024-04-20 08:47:50 发布
阅读量1.1k 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lianxisheng/p/10073192.html
版权

一.

<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

 

二.

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})

　　

三.

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})

　　

　　

四.

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

　　

五.

<style>
.text-danger {
	width: 100px;
	height: 100px;
	background: red;
}
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

　　

六. style内联样式

<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})

　　

　　

转载于:https://www.cnblogs.com/lianxisheng/p/10073192.html

weixin_30319153
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue添加样式
qq_42309685的博客
08-13 1790
vue通过属性绑定为元素设置class属性 第一种方法：直接传递一个数组，注意，class需要v-bind为其绑定属性 第二种方法：将样式存放在一个对象中为元素绑定 css部分 <style> .red { color: #f00; } .big { font-size: 150%; } .small { font-size: 50%; }...
vue中动态添加class类名的方法
10-18
下面将详细讲解在Vue中动态添加class类名的几种常见方法。 ### 1. 对象形式 Vue允许我们使用一个JavaScript对象来动态地为元素添加或移除class。在这个对象中，键是类名，值是布尔值。如果值为`true`，则添加对应...
Vue学习之样式处理
最新发布
2401_84092778的博客
04-20 636
效果。
vue中引入样式方法
m0_53679031的博客
08-07 6565
vue样式引入问题
vue中动态添加样式
weixin_57446003的博客
01-29 2945
vue.js中动态添加样式
Vue动态添加样式的方法
weixin_41493782的博客
12-22 4176
一、动态添加class的方法 根据数据长度判断是否展示类名 <div :class="item.length > 3?'active':''></div> 定义data，添加class及style <div :class="styleList[item.xxx].hovers" :style="{color:styleList[item.xxx].color}"> <img :src="styleList[item.xxx].src"> &
vue操作dom元素的3种方法示例
10-14
这里我们将探讨Vue操作DOM的三种方法。 1. **原生JavaScript操作DOM** 在Vue中，尽管我们鼓励避免直接操作DOM，但有时仍然需要借助原生JavaScript方法。例如，`document.getElementById()`、`document....
vue-cli脚手架引入图片的几种方法总结
08-27
Vue CLI 脚手架引入图片的几种方法总结 在 Vue CLI 脚手架中引入图片是一项基本操作，但是在实际开发中，开发者们可能会遇到各种问题。以下是在 Vue CLI 脚手架中引入图片的几种方法总结： import 方法 在 Vue ...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
从压缩包的文件名 "audio-vue-master" 来看，这可能是该项目的源码仓库，其中可能包含以下几个主要部分： - `src` 目录：存放源代码，包括 Vue 组件、样式文件、脚本等。 - `dist` 目录：编译后的生产代码，可以...
Vue中的scoped实现原理及穿透方法
08-27
因此，我们可以采取第三种方法，即在外层DOM上添加一个唯一的class来区分不同组件。这方法既实现了类似于scoped的效果，又方便修改各种第三方组件的样式，代码看起来也相对舒适。 scoped的实现原理可以分为以下几个...
vue实现点击追加选中样式效果
10-16
今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【笔记整理】—— 2.13 Vue概述 | 指令 | 添加样式
Paul 的笔记库
04-30 266
目录一、简介1 前端开发技术的发展历程2 Vue 特点3 MVVM 与 MVC 区别4 Vue 基本框架二、指令v-cloak ： 解决 插值表达式闪烁V-text ： 把元素以文本形式执行v-html ： 把元素以html形式执行v-bind ： 属性绑定机制v-on ： 事件绑定机制事件修饰符v-model ： 双向绑定机制v-forv-if | v-show三、添加样式使...
在vue中methods 中写 拼接html 元素 @click 不起作用问题 ，给指定文字加样式
DLM1031653077的博客
04-22 844
实现效果，指定文字变红，点击红色文字，弹出窗口 html <div v-html='text' ></div> // 首先要把调用的方法 赋值到window上 created() { window.ale=this.ale; }， methods: { querysour(e){ let replaceStr; e=e.replace(/(^\s*)|(\s*$)/g, "")...
Vue常用指令
一只前端小白的博客
04-03 1879
vue声明式渲染： 采用模板语法来声明式的将数据渲染进Dom <div id="app"> <h1>{{msg}}<h1> </div> new Vue({ el:"#app", data:{ msg:"hello Vue", } }); //渲染结果会将h1中的文本渲染成hello Vue 指令： v-bind指令（简写为“:”）：用...
28-vue基础：vue动态添加style样式
小凡子的博客
02-11 3182
vue基础：绑定属性class，绑定style
vue 方法里面修改样式_在vue中使用样式的方法
weixin_30276247的博客
12-30 4585
一、vue属性绑定在vue中，是通过v-bind 属性绑定来实现给元素绑定style样式。其中有两种方式，一种是通过绑定class类绑定样式，另一种是通过内联样式来实现样式的绑定。二、绑定class样式1. 数组这是一个邪恶的H12. 数组中使用三元表达式这是一个邪恶的H13. 数组中嵌套对象这是一个邪恶的H14. 直接使用对象这是一个邪恶的H1.red {color: red;}.thin {f...
09 在Vue中使用样式
Civitasv
02-05 1123
本篇介绍如何在Vue中添加样式
Vue指令、样式及类名绑定、methods、computed、watch
congboer的博客
07-25 410
Vue指令、methods、computed、watch、 vue的指令有：v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-once、v-pre、v-cloak共14种。 其中： 1、v-html和v-text是用来数据展示的，两者区别： v-html可以识别标签并解析，v-text不会识别...
vue的样式绑定方式有几种
06-07
Vue 的样式绑定方式有以下几种： 1. 对象语法：使用对象语法可以绑定多个样式，语法为 `:style="{property1: value1, property2: value2, ...}"`。 2. 数组语法：使用数组语法可以在多个样式间切换，语法为 `:class="[class1, class2, ...]"`。 3. 绑定到组件根元素：使用 `:class` 或 `:style` 绑定到组件根元素上。 4. 带条件的绑定：使用 `v-bind:class` 可以根据条件动态添加或移除类名。 5. 内联样式：可以直接在元素上使用 `:style` 绑定内联样式，语法为 `:style="{property: value}"`。 6. CSS Modules：使用 CSS Modules 可以将样式作用域限制在组件内。 7. Scoped CSS：使用 Scoped CSS 可以将样式作用域限制在组件内，但是 Scoped CSS 只能应用于单文件组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值