有关于绑定v-bind绑定class的练习

最新推荐文章于 2024-03-15 17:54:06 发布
最新推荐文章于 2024-03-15 17:54:06 发布
阅读量59 收藏
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17449435/article/details/118680570
版权

有关于绑定v-bind绑定class的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
	<style>
		.cs1{
			color: black;
			font-weight: 200;
			font-style: italic;
			letter-spacing: 0.5em
		}
		.cs2{
			color: red;
			font-weight: 300;
			font-style: inherit;
			letter-spacing: 1em
		}
	</style>
</head>




<body>
	<script src="https://unpkg.com/vue@next"></script>
	
	<div id="app">
		<p :class="{cs1:bor1right,cs2:bor2right}" v-show="msg">{{name}}</p>
		<button @click="changeshow" @mouseover="changename2">越共探头</button>
		<button @click="changename" @dblclick="changecolor">来自老大哥的警告</button>
	</div>


<script>
	const app = Vue.createApp({
		data(){
			return{
				name:'越共探头',
				name2:'同志，肃反名单上有你',
				msg:false,
				bor1:'cs1',
				bor2:'cs2',
				bor1right:true,
				bor2right:false,
			}
		},
			
		methods:{
			changeshow:function(){
				this.msg = !this.msg
				that = this.name
			},
			changecolor:function(){
				this.name = this.name2
			},
			changename:function(){
				this.bor1right = !this.bor1right
				this.bor2right = !this.bor2right
			},
			changename2:function(){
				this.bor1right = !this.bor1right
				this.bor2right = !this.bor2right
				this.name = that
			}
		},
		
	})
	const vm=app.mount('#app');
</script>
</body>
</html>
李笙诗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue v-bind动态绑定class实例方法
10-15
在本篇文章里小编给大家分享的是一篇关于Vue—v-bind动态绑定class的知识点内容，有需要的朋友们可以参考下。
Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）
运维玄德公
05-28 1888
1. class 属性绑定 语法示例 完整示例 2. 属性的覆盖 2.1 绑定多个值相互覆盖 语法示例 完整示例 2.2 绑定一个对象（对象成员间覆盖） 语法示例 完整示例 3. 绑定对象的计算属性 语法示例 完整示例 4. 绑定数组 4.1 直接绑定一个数组 语法示例 完整示例 4.2 覆盖顺序 4.3 绑定一个是数组的object 4.4 控制数组成员是否生效 语法示例 完整示例 再次强调顺序...
v-bind 绑定class 和 style 的几种方法
weixin_41796631的博客
09-27 4929
这篇文章介绍v-bind 绑定html 样式的方法。包括绑定class 和style（内联样式）的方法  ● 绑定class有2种语法 （一、对象语法：1.数据属性对象、2.计算属性对象；二、数组语法） ● 绑定style有3种语法 （一、对象语法：1.数据属性对象、2.计算属性对象；二、数组语法；三、多重值）   ● 绑定class 一、对象语法： 1. 数据属性对象语法： ...
v-bind动态绑定
qq_53841687的博客
07-29 4369
动态绑定
vue元素属性绑定v-bind
jyn15159的博客
12-15 1046
vue元素属性绑定v-bind 属性绑定-基本使用 使用 v-bind 指令对标签标准属性进行绑定。 语法： <标签 v-bind:属性名称="表达式" ></标签> <!-- 简易方式设置，推荐使用 --> <标签 :属性名称="表达式"></标签> 注意： 冒号(:)的简易设置推荐使用。 如果有需要，绑定的内容可以进行变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用。 案例： 通过v-bind对img标签的src、wid
v-bind动态绑定class
yuan_21的博客
06-14 1776
v-bind动态绑定classv-bind动态绑定class（对象语法）v-bind动态绑定class（数组语法） v-bind动态绑定class（对象语法）   对象语法的含义是：class后面跟的是一个对象。   用法一：直接通过{}绑定一个类，<h2 :class="{active:isSize}">{{message}}</h2>   用法二：也可以通过判断，传入多个值，如<h2 :class="{active:isSize,line:isColor}">{{me
v-bind绑定class的两种方式
lzh的博客
02-03 1247
绑定方式：数组语法 用法一：直接通过[]绑定一个类 <h2 :class="['active']">{{message}}</h2> 用法二：也可以传入多个值 <h2 :class=“[‘active’, 'line']">{{message}}</h2> 用法三：和普通的类同时存在，并不冲突 注：会有title/active/line三个类 <h2 class="title" :class=“[‘active’, 'line']">{{mes
v-bind 绑定 class 与 style 基础用法
zsx0728的博客
03-15 1037
使用 v-bind 指令绑定 class 和 style 时语法相对复杂一些，这两者是可以互相替代的，即 v-bind 绑定 class 属性可以改写成绑定 style 属性，只是 css 属性位置变了而已。
Vue-学习笔记-03 v-bind绑定class与style
欢迎访问我的主页：https://www.bookbook.cc
07-24 8206
一、v-bind 动态绑定属性 二、v-bind 绑定class 2.1 绑定字符串 2.2 对象语法 2.3 绑定数组 三、动态绑定style 3.1 对象方式 3.2 数组方式
Vue中Class和Style几种v-bind绑定的用法-详解案例
JackieDYH的博客
05-14 1876
项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。 除了设置 class 我们在项目中也经常设置元素的内联样式 style，在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除，利用 css() 方法设置/获取元素的内联样式。 那么在 vue 中 我们如何处理这类的效果呢？在 v.
Vue中数据绑定v-bind与v-model
sdrfsef的博客
05-13 2614
目录 1.v-bind单向绑定 1.1常用属性绑定 1.2 class绑定 1.3 style绑定 2.v-model双向绑定 2.1普通表单元素绑定 2.2特殊表单元素绑定 1.v-bind单向绑定 vibind可以用来动态地绑定一个标签的属性 语法 :v-bind :标签属性 简写 :标签属性 1.1常用属性绑定 <div id="app"> <a v-bind:href="url">跳转到百度</a> &lt...
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
在vue中v-bind使用三目运算符绑定class的实例
10-17
今天小编就为大家分享一篇在vue中v-bind使用三目运算符绑定class的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue基础之v-bind属性、class和style用法分析
10-17
主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
node-v0.10.27-x86.msi
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
课设毕设基于SSM的高校二手交易平台-LW+PPT+源码可运行.zip
05-16
课设毕设基于SSM的高校二手交易平台--LW+PPT+源码可运行
c++,冒险游戏，可供学习
05-16
冒险游戏，可供学习
v-bind绑定class
03-16
v-bind是Vue.js中的一个指令，用于动态地绑定HTML元素的属性或者组件的属性。v-bind可以用来绑定class属性，实现动态添加或移除CSS类的效果。 ...以上就是v-bind绑定class的介绍，希望对你有帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值