Vue绑定Style和Class写法
vue2写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.aa {
background: green;
}
.bb {
background: yellow;
}
.cc {
background: pink;
}
.dd {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="classobj">class绑定对象</div>
<div :class="classarr">class绑定数组</div>
<div :style="styleobj">style绑定对象</div>
<div :style="stylearr">style绑定数组</div>
</div>
<script>
var vm = new Vue({
data: {
classobj: {
aa: true,
bb: true,
cc: false,
},
classarr: ['aa', 'bb'],
styleobj: {
backgroundColor: 'red',
},
stylearr: [{ backgroundColor: 'green' }],
},
}).$mount('#app');
// Vue.set(对象,属性,属性值) 例如：Vue.set(vm.classobj,dd,true)
// vm.classarr.push('dd')
// vm.stylearr.push({fontSize:'20px'})
</script>
</body>
</html>
vue3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../js/vue.global.js"></script>
</head>
<style>
.aa {
background: green;
}
.bb {
background: yellow;
}
.cc {
background: pink;
}
.dd {
background: blue;
}
</style>
<body>
<div id="app">
{{name}}
<div :class="classobj">动态切换class-对象写法</div>
<button @click="addClass">addClass</button>
</div>
<script>
var obj = {
data() {
return {
name: 'ly',
classobj: {
aa: true,
bb: true,
cc: false,
},
};
},
methods: {
addClass() {
this.classobj.dd = true;
},
},
};
const app = Vue.createApp(obj).mount('#app');
</script>
</body>
</html>
Vue绑定Style和Class写法的更多相关文章
- VUE 绑定背景图片的写法
<div v-bind:style='{"background-image":"url("+imgUrl+")"}' >< ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符
目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue2.* 绑定属性 绑定Class 绑定style 03
<template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title ...
- NO.04--我的使用心得之使用vue绑定class名
今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...
- $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数
一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候 表名小写_set.all()不知是哪个字段 ...
- 练习vue(class,style属性)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...
随机推荐
- Pytorch语法——torch.autograd.grad
The torch.autograd.grad function is a part of PyTorch's automatic differentiation package and is use ...
- 4.go语言复合类型简述
目录 1. 本章前瞻 2.来自leetcode的例题 描述 分析 题解 3. 复合类型新版本的变化 3.1 string和[]byte的高效转化 3.2 内置函数clear 4. 复合类型概述 4.1 ...
- HTML视频背景(动态背景)
网页动态背景一般是用视频实现的,能增添网页的感染力,我觉得很好看,也不难,不妨学一下. 先加入下面一串代码: 1 <style> 2 video{ 3 height: 100%; 4 wi ...
- SQL - 5
Smiling & Weeping ----我本不想和风讨论你,可风说可以替我去见你 第五章:SQL高级处理 5.1 窗口函数 5.1.1 窗口函数概念及基本的使用方法 窗口函数也称为OLAP ...
- redis基本数据类型 string
string类型 1.SET:添加或者修改已经存在的一个String类型的键值对 2.GET:根据key获取String类型的value 3.MSET:批量添加多个String类型的键值对 4.MGE ...
- MySQL运维1-日志
一.错误日志 错误日志是MySQL中最重要的日志之一,它记录了当MySQL启动和停止时,以及服务器在运行过程中发生的任何严重错误时的相关信息,当数据库出现任何故障导致无法正常使用时,建议首先查看此日志 ...
- MySQL系列之——错误日志(log_error)、二进制日志(binary logs)、慢日志（slow_log）
文章目录 1.错误日志(log_error) 1.1 作用 1.2 错误日志配置 1.3 日志内容查看 2. binlog(binary logs):二进制日志 ***** 2.1 作用 2.2 bi ...
- Mysql数据库、表设计规范指南
结合网上资料与项目实际情况,总结下列MYSQL数据库设计规范. 一.MYSQL数据库设计规范1.数据库命名规范采用26个英文字母(区分大小写)和0-9的自然数(经常不需要)加上下划线'_'组成,禁止使 ...
- json数组格式问题
---恢复内容开始--- 使用jsonserver来模拟后台数据接口时犯了一个很低级的错误 找了很久没有发现有什么不对劲的地方,后来仔细发现原来是一个很细微的语法问题:}] 中间不能有逗号!! -- ...
- docker容器管理脚本
#!/bin/bash #auto install docker and Create VM #by jfedu.net 2017 #Define PATH Varablies IPADDR=`ifc ...