11 v-bind指令

概述

v-bind指令可以说是Vue3中最常用的指令之一,使用v-bind,我们几乎能够给任何实现动态的绑定比值。

这里,我们主要演示以下,通过v-bind动态绑定CSS样式。

基本用法

我们创建src/components/Demo11.vue,在这个组件中,我们要:

  • 场景1:动态绑定一个CSS样式
  • 场景2:动态绑定一个CSS样式类

代码如下:

<script setup>
const styleObj = {color: "red",fontSize: "33px",
}
</script>
<template><div :style="styleObj">styleObj 动态样式</div><div :class="{active:true}">动态样式类:true</div><div :class="{active:false}">动态样式类:false</div>
</template>
<style>
.active {color: yellow;
}
</style>

接着,我们修改src/App.vue,引入Demo11.vue并进行渲染:

<script setup>
import Demo from "./components/Demo11.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后,我们浏览器访问:http://localhost:5173/

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo11.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo11.vue

<script setup>
const styleObj = {color: "red",fontSize: "33px",
}
</script>
<template><div :style="styleObj">styleObj 动态样式</div><div :class="{active:true}">动态样式类:true</div><div :class="{active:false}">动态样式类:false</div>
</template>
<style>
.active {color: yellow;
}
</style>

启动方式

yarn
yarn dev

浏览器访问:http://localhost:5173/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/232849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python基于joblib的并行计算

文章目录 Python基于joblib的并行计算适用场景使用示例总结爬虫&joblib使用`joblib`的场景注意事项使用实例结论joblib介绍简单示例多参数并行并行时CPU是怎么分配的何时选用并行进程&线程进程和线程之间的关系

JS逆向实战——开发者工具检测

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、背景 在JS逆向领域&#xff0c;Chrome开发者工具是核心&#xff0c;抓包、调试、看调用栈等都离不开它。可以说&#xff0c;逆向人…

RHCE8 资料整理(十)二

RHCE8 资料整理 第 31 章 变量的使用&#xff08;一&#xff09;31.1 手动定义变量31.2 变量文件31.3 字典变量31.4 列表变量31.5 数字变量的运算31.6 注册变量31.7 facts变量 第 31 章 变量的使用&#xff08;一&#xff09; 31.1 手动定义变量 通过vars来定义变量&#xff…

C语言--字符函数与字符串函数

大家好&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流 本文由&#xff1a;残念ing 原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各位…

关于技术标准那些事——第一篇:面纱

突然就冒出来这两个字“面纱”&#xff0c;就拿她来做开篇的标题吧。 想了很久&#xff0c;从检测到全面质量管理&#xff0c;有太多可展开的内容&#xff0c;但是如果不回归到根本&#xff0c;我们会在偏离的轨道上越跑越远&#xff0c;所以还是从了解标准&#xff0c;了解标准…

Java 数据结构篇-实现二叉搜索树的核心方法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 二叉搜索树的概述 2.0 二叉搜索树的成员变量及其构造方法 3.0 实现二叉树的核心接口 3.1 实现二叉搜索树 - 获取值 get(int key) 3.2 实现二叉搜索树 - 获取最小…

程序流程图的意义(合集)

程序流程图的意义 1、矩形 作用&#xff1a;一般用作要执行的处理(process)&#xff0c;在程序流程图中做执行框。 在axure中如果是画页面框架图&#xff0c;那么也可以指代一个页面。有时候我们会把页面和执行命令放在同一个流程中做说明&#xff0c;这个时候将两类不同的矩形…

RHCE8 资料整理(十)三

RHCE8 资料整理 第 31 章 变量的使用&#xff08;二&#xff09;31.8 内置变量 groups31.9 内置变量 hostvars31.10 内置变量 inventory_hostname31.11 变量过滤器31.11.1 数字类型31.11.2 列表31.11.3 设置变量默认值default31.11.4 字符串相关31.11.5 加密相关 第 31 章 变量…

算法(2)——滑动窗口

前言&#xff1a; 步骤及算法模板&#xff1a; 确定两个指针变量&#xff0c;left0,right0; 进窗口&#xff1a; 判断&#xff1a; 出窗口 更新结果 接下来我们的所用滑动窗口解决问题都需要以上几个步骤。 一、长度最小的子数组 209. 长度最小的子数组 - 力扣&#xff08;L…

Ebullient第一阶段开发小结

一. 简介 距离Ebullient硬件发布已有一段时间&#xff0c;小一个月吧&#xff0c;在这段时间内在努力的编写代码&#xff0c;现在终于完成了第一阶段的功能设计&#xff0c;算是一个小型的样机吧&#xff0c;基本的代码框架基本确定了&#xff0c;相信后续的会快一点(希望如此…

Nodejs 第二十六章(反向代理)

什么是反向代理? 反向代理&#xff08;Reverse Proxy&#xff09;是一种网络通信模式&#xff0c;它充当服务器和客户端之间的中介&#xff0c;将客户端的请求转发到一个或多个后端服务器&#xff0c;并将后端服务器的响应返回给客户端。 负载均衡&#xff1a;反向代理可以根…

前端全栈基础之CSS中margin,padding

一、margin属性 Margin属性有以下一些属性值&#xff1a; 1.margin-top: 设置元素上方的外边距大小&#xff1b; 2.margin-right: 设置元素右侧的外边距大小&#xff1b; 3.margin-bottom: 设置元素下方的外边距大小&#xff1b; 4.margin-left: 设置元素左侧的外边距大小…

二、W5100S/W5500+RP2040之MicroPython开发<DHCP示例>

文章目录 1 前言2 相关网络信息2 .1 简介2.2 DHCP工作原理2.3 DHCP的优点2.4 应用场景 3 WIZnet以太网芯片4 DHCP网络设置示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链接 1 前言 在这个智能硬件和物联网时代&#…

在Python中使用Kafka帮助我们处理数据

Kafka是一个分布式的流数据平台&#xff0c;它可以快速地处理大量的实时数据。Python是一种广泛使用的编程语言&#xff0c;它具有易学易用、高效、灵活等特点。在Python中使用Kafka可以帮助我们更好地处理大量的数据。本文将介绍如何在Python中使用Kafka简单案例。 一、安装K…

C到C++笔记记录

C到C笔记记录 输入(cin) and 输出(cout)bool内联(inline)重载缺省函数哑元引用(&)C动态内存分配笔记扩充&#xff1a; 输入(cin) and 输出(cout) #include<iostream>using namespace std;void main() {int i;//输入 cincin >> i;//输出 coutcout << i &…

浅谈云性能测试的关键要点

随着云计算的广泛应用&#xff0c;云性能测试成为确保云服务质量和性能的关键环节。云性能测试不仅涵盖了传统性能测试的方面&#xff0c;还需要考虑云环境的特殊性。以下是云性能测试的几个关键要点&#xff1a; 1. 模拟真实云环境 云环境具有虚拟化、弹性扩展等特点&#xff…

IDEA tomcat内存不足

-Xms256m -Xmx256m -XX:MaxNewSize256m -XX:MaxPermSize256m

API资源对象StorageClass;Ceph存储;搭建Ceph集群;k8s使用ceph

API资源对象StorageClass;Ceph存储;搭建Ceph集群;k8s使用ceph API资源对象StorageClass SC的主要作用在于&#xff0c;自动创建PV&#xff0c;从而实现PVC按需自动绑定PV。 下面我们通过创建一个基于NFS的SC来演示SC的作用。 要想使用NFS的SC&#xff0c;还需要安装一个NFS…

npm ERR! path /Users/apple/.npm/_cacache/index-v5/11/77/cf18d9ab54d565b57fb3

在使用npm时&#xff0c;有时候您可能会遇到类似以下错误的权限问题&#xff1a; npm ERR! path /Users/apple/.npm/_cacache/index-v5/11/77/cf18d9ab54d565b57fb3 npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall open npm ERR! Error: EACCES: permission denie…

掌握数组处理的利器:双指针技巧详解

掌握数组处理的利器&#xff1a;双指针技巧详解 在算法的世界里&#xff0c;数组是最基础也是最常见的数据结构之一。处理数组相关问题时&#xff0c;我们经常需要遍历数组元素&#xff0c;而如何高效地进行遍历&#xff0c;就显得尤为重要。今天&#xff0c;我们就来深入探讨…