Vue.js 3.0 学习笔记（七）class与style绑定

最新推荐文章于 2024-03-11 18:22:52 发布
最新推荐文章于 2024-03-11 18:22:52 发布
阅读量366 收藏 2
点赞数
分类专栏： #vue3 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44648936/article/details/123430267
版权

一、绑定HTML样式（class）

1、数组语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class数组语法</title>
<style>
      .static{
            color: white;
       }
       .class1{
            background: #79FF79;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
       .class2{
            width: 400px;
            height: 100px;
        }
</style>
</head>
<body>
<div id="app">
    <!--是叠加，而不是覆盖-->
    <div class="static" v-bind:class="['class1','class2']">{{date}}</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             date:"从军玉门道，逐虏金微山。"
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

在这里插入图片描述

2、对象语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class对象语法</title>

</head>
<body>
<style>
    .static{
        color: white;
    }
    .class1{
        background: #97CBFF;
        font-size: 20px;
        text-align: center;
        line-height: 100px;
    }
    .class2{
        width: 200px;
        height: 100px;
    }
</style>
<div id="app">
    <div class="static" v-bind:class="{ class1: boole1, 'class2': boole2}">{{date}}</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
                boole1: true,
                boole2: false,
                date:"红藕香残玉簟秋"
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

在元素上只写上对象变量也可以

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class对象语法</title>

</head>
<body>
<style>
        .static{
            color: white;
        }
        .class1{
            background: #5151A2;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
        .class2{
            width: 300px;
            height: 100px;
        }
</style>
<div id="app">
    <div class="static" v-bind:class="objStyle">{{date}}</div>
</div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            date:"竹色溪下绿，荷花镜里香。",
            objStyle:{
                class1: true,
                class2: true
            }
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

二、绑定内联样式（style）

1、对象语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class对象语法</title>
</head>
<body>
<div id="app">
    <div v-bind:style="{color:'blue',fontSize:'30',border:'1px solid red'}">辞君向天姥，拂石卧秋霜。</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({ }).mount('#app');
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class对象语法</title>
</head>
<body>
<div id="app">
    <div v-bind:style="styleObject">夜月一帘幽梦，春风十里柔情。</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        //计算属性
        computed:{
            styleObject:function(){
                return {
                    color: 'blue',
                    fontSize: '30px'
                }
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

2、数组语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>style数组语法</title>
</head>
<body>
<div id="app">
    <div v-bind:style="[styleObject1,styleObject2]">片片飞花弄晚，蒙蒙残雨笼晴。</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            styleObject1: {
                color: 'red',
                fontSize: '40px'
            }
           }
        },
        //计算属性
        computed:{
            styleObject2:function(){
                return {
                    border: '1px solid blue',
                    padding: '30px',
                    textAlign:'center'
                }
            }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>

</body>
</html>

三、综合案例——设计隔行变色的商品表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色的商品表</title>
<style>
body {
        width: 600px;
}
table {
border: 2px solid black;
			}
			table {
			    width: 100%;
			}
			th {
			    height: 50px;
			}
			th, td {
			    border-bottom: 1px solid black;
			    text-align: center;
			}
			
			[v-cloak] {
			       display: none;
			}
			.even {     
				background-color: #7AFEC6;
			}
		</style>
	</head>
	<body>
		<div id = "app" v-cloak>
		   <table>
		    <tr>
		        <th>编号</th>
		        <th>名称</th>
		        <th>库存</th>
		        <th>价格</th>
		        <th>产地</th>
		    </tr>
		    <tr v-for="(goods, index) in goodss" 
		    	:key="goods.id" :class="{even : (index+1) % 2 === 0}">
		        <td>{{ goods.id }}</td>
		        <td>{{ goods.title }}</td>
		        <td>{{ goods.num }}</td>
		        <td>{{ goods.price }}</td>
		        <td>{{ goods.city }}</td>
		    </tr>
</table>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm = Vue.createApp({
          data() {
    	  return {
    	      goodss: [
        		{
             id: 1,
        				      title: '洗衣机',
        				      num: '2800台',
        				      price: 188,
        				      city: '北京'
        				    },
                            {
                              id: 2,
                              title: '电视机',
                              num: '2600台',
        				      price: 188,
        				      city: '广州'
                            },
                            {
                              id: 3,
                              title: '冰箱',
                              num: '5400台',
        				      price: 188,
        				      city: '上海'
                            },
                            {
                              id: 4,
                              title: '空调',
                              num: '1800台',
        				      price: 188,
        				      city: '北京'
                            }
                        ]
    		        }
    		    },
    		    methods: {
    		    	deleteItem(index){
    			  		this.goodss.splice(index, 1);
    			  	}
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>

在这里插入图片描述

奥妙无穹
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 学习笔记
weixin_64549900的博客
09-24 406
vue使用
Vue3中样式绑定的使用方法、相关指令和一些实际应用场景
网络技术联盟站
07-18 1364
Vue3提供了灵活且方便的方式来实现样式绑定。我们可以使用:class指令来绑定类名，通过对象或数组语法实现不同的样式控制。而:style指令则用于绑定内联样式，可以通过对象或数组语法来实现动态的样式调整。此外，我们还可以使用三元表达式或计算属性来实现条件样式绑定，以及与响应式数据结合实现响应式样式控制。
Vue 3.0 Class与Style绑定 【Vue3 从零开始】
2201_75866484的博客
02-21 632
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
初识Vue 3.0 —— 动态class绑定
QUX轻博客
12-14 1564
<h5>16.Class绑定</h5> <div> <p>&lt;div :class="{ active...
第26节: Vue3 绑定到对象
特创数字
12-17 204
在UniApp中使用Vue3框架时，你可以使用对象绑定语法将属性绑定到对象上。在上面的示例中，我们定义了两个响应式引用对象和，分别用于存储文本颜色和字体粗细的值。然后，在模板中的元素上，我们使用:style指令将样式绑定到一个对象上。该对象包含两个属性，即color和fontWeight，分别对应于和的值。这样，每次点击按钮时，就会根据当前的颜色和粗细值更新文本的样式。通过使用对象绑定语法，你可以将多个属性绑定到一个元素上，并根据Vue实例中的状态动态地更新元素的样式。
前端VUE3.0,DAY15，绑定class样式与style样式
疯子的梦想@的博客
08-05 486
VUE3.0,DAY15绑定样式，点击一次后改变为指定样式。设置初始样式，点击后随机改变样式点击一次就去除一个样式 and 点击后是否出现某样式绑定style样式 绑定样式，点击一次后改变为指定样式。 1.初始的样式是基本样式basic加normal，随后点击，变换为basic+happy，其中basic是不会消失的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
vue.js学习笔记之绑定style样式和class列表
10-21
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下
Vue.js学习笔记之常用模板语法详解
01-19
1. **实时渲染**：Vue.js 的`v-model`指令使得输入框的值能够与数据模型动态绑定。例如： ```html <div class="row"> 文本 - 实时渲染 <input type="text" v-model="msg" class="col-md-2" /> <span class="col...
Vue.js第一天学习笔记（数据的双向绑定、常用指令）
12-29
在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。并且v-model指令只能用于:<input>、<select>、<textarea>这三种标签。 <div class=form-inline> <div class=form-group> <
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
Vue3浅谈：（三）Vue3类与样式绑定
samxiaoguai的博客
01-09 5631
一、Vue3Class 绑定 1.Vue3Class 绑定基础 绑定对象：绑定数组 二、Vue3 Style绑定 1.Vue3Style 绑定基础 绑定对象：绑定数组：自动前缀:样式多值:
VUE3 之 样式绑定
追风人的博客
12-23 1045
目录 1. 概述 2. 样式绑定 3. 综述 4. 个人公众号 1. 概述 老话说的好：脚踏实地，从小事做起。 言归正传，今天我们来聊聊 VUE3 的样式绑定。 2. 样式绑定 2.1 样式例子 <style> /* 颜色 */ .color-red { color: red; } /* 字体 */ .font-size-25 {
Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
最新发布
m0_73560798的博客
03-11 913
绑定样式：1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。
[ Vue3 ] 三种方式实现组件数据双向绑定
记录开发日常
11-28 8205
在 Vue 中，组件数据双向绑定是一项非常重要的特性，它使得我们能够轻松地在组件中处理数据的变化并将其同步到视图 比如我们想要在父组件中修改数据能够同步给子组件，并且子组件修改数据也能同步给父组件，使他们数据一方发生变化，则双方都发生改变
vue绑定多个样式的两种方式
weixin_43930256的博客
11-09 1531
vue绑定多个样式的两种方式
【Vue3】Vue组件的样式绑定
早睡早起长头发的博客
08-15 680
一、为Html标签绑定class属性 v-bind，为class属性绑定一个对象，在对象中可以设置对象是否可用 1.绑定class属性,由绑定的变量来决定应用哪个样式 2.可以将样式直接设置成Vue组件中的数据对象 二、绑定内联样式 ...
前端学习笔记四：Vue（3）样式绑定
Reiuji_Utsuho的博客
08-10 236
都懒得想开头了，直接上。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../../vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/cs
vue3.0 + vite + typescript, 简单的通过class类的方式进行二次封账axios
前端
01-29 1272
前言 刚写了一个关于此的项目移动端进行记录一下，哪里觉得写的不对的地方，希望各位大佬多提提宝贵的意见，废话不多说，上代码。 1、 新建文件 request.ts //引入移动端 vant UI 框架引入提示方式 import { Toast, Dialog } from "vant"; //引入路由实现跳转 import Router from "@/router/index"; //引入axios，结构出相应的方法进行使用 import axios, {AxiosInstance, AxiosReques
vue3(一)-基础入门之指令以及动态设置 class、style属性
weixin_43520586的博客
11-25 5025
/constcreateAppdatareturnmessage1mount'#app'
Vue.js 3.0编写一个插件
06-06
好的，下面是编写 Vue.js 3.0 插件的步骤： 1. 创建插件 在插件文件中，首先需要导出一个对象，该对象包含一个 install 函数。install 函数将在 Vue.use() 方法中调用。 ``` // plugin.js export default { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值