vue中css写法_vue css 写法大全

.isActive {

position: relative;

color: #348EED;

background: #BFBFBF;

border: #000c17;

width: 30px;

height: 50px;

}

.left {

left: 50px;

margin-left: 50px;

}

1.普通写法

直接把变量给css值变量的值是字符串正常的css

//js

return isActive: 'isActive left'

对象写法

isActive是否显示取决于isAct2 是true还是fales true 就正常显示 false 隐藏和if判断一样

//js

isActive: 'isActive left',

isAct2: true,

left2: false,

3.数组写法

本质上和普通写法一样

//js

isAct3: ['isActive', 'left'],

4.三元写法

三元 if + else

//js

isActive: 'isActive left',

isAct4: true,

5.转回原始写法

在大括号中的值不再是变量而是原始的css值

6.style

等同于正常的css,但是可以在里面加逻辑如判断

左

//js

computed: {

// 计算属性

style2() {

return {

color: this.isAct2 ? 'red' : 'blue',

fontSize: '80px'

}

vue中css写法_vue css 写法大全相关推荐

在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
vue中全局引入bootstrap.css
1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...
vue中点击事件的写法_vue实现绑定事件的方法实例代码详解
一.前言 vuejs中的事件绑定,使用来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法执行方法的第 ...
vue中点击事件的写法_vue基础之事件v-onclick=函数用法示例
本文实例讲述了vue基础之事件v-οnclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... ...
vue中template的三种写法
第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. 第二种:直接写在template标签里,这 ...
“约见”面试官系列之常见面试题之第七十五篇之vue中如何使当前css起作用（建议收藏）
方法很简单,在组件中的style前面加上scoped就可以了,示例: 本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服" ...
vue中ajax同步_Vue处理ajax请求
Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...
vue中beforeupdate意思_VUE的生命周期之beforeMount、mounted、beforeUpdate、updated
释放双眼,带上耳机,听听看~! beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行 ...

vue中css写法_vue css 写法大全

vue中css写法_vue css 写法大全相关推荐

最新文章

热门文章