vue（class案例）

最新推荐文章于 2023-10-24 11:19:17 发布
最新推荐文章于 2023-10-24 11:19:17 发布
阅读量95 收藏
点赞数
分类专栏： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/103227973
版权
前端 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
vue
35 篇文章 0 订阅
订阅专栏

这是一个案例 点击哪一个，哪一个就会变红

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			.isActive{
				color:red;
			}

		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<ul>
				<li v-for="(i , index) in movies" :class="{isActive:currentId===index}" @click="onTap(index)" >{{index}}-{{i}}</li>
			</ul>
        </div> 
        <script>
            new Vue({
                el:"#root",
                data:{
					currentId:0,
					movies:["海王","海尔兄弟","海贼王","海神唐三"]
                },
                methods:{
                    onTap(index){  
						this.currentId=index;
                    }
                }
            })
        </script>
    </body>
</html>

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目案例
搬砖中
12-30 2万+
路由：index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: First }, { path: '/about', ..
vue基础案例
qq_43420617的博客
03-25 2786
文章目录后台管理案例一、安装和配置路由二、基于路由渲染登录组件三、模拟登录功能四、后台主页基础布局五、退出登录并控制访问权限六、子路由嵌套显示七、点击进入用户详情页八、升级用户详情页的路由路由path的注意点扩展：控制页面的权限黑马头条一、 初始化① 创建并梳理项目结构② 安装和配置Vant组件③ 使用Tabber组件⑤ 使用Navbar组件⑥ 覆盖Navbar的默认样式二、文章列表①. 文章列表数据请求方式请求根路径请求URL 地址查询参数响应的数据结构返回参数说明② 封装ut
vue添加同class及不同class方式结合实例
鸡汤、好腻
10-20 616
上效果图：实例1为添加同一类名，实例二为添加不同类名 代码片段： <div style="font-size: 15px;">实例1：</div> <ul> <li v-for="(item,idx) in all" :key="idx" :class="{fontColor:cuIndex===idx}" @...
【前端】vue3中引入class类的写法
qq_43813351的博客
10-24 2107
单独将一个类作为一个js文件，然后引入到vue3页面使用。
vue动态绑定style和class例子
qq_38134913的博客
09-25 423
动态绑定style :style="{background: 'url( '+ img.imgSrc +')',backgroundSize:slide_width}" 动态绑定class :class="{nav_item_a:item.title===active_nav_index}" 后续继续完善例子
关于vue动态绑定class的样例
m0_67233919的博客
03-28 830
关于vue动态绑定class的样例 一、基本的绑定样式 1.对象语法 <div :class="{ active: isActive ，'text-danger': hasError }"></div> 2.数组语法 <div v-bind:class="[activeClass, errorClass]"></div> 3.数组语法中加入对象语法 <div v-bind:class="[{ active: isActive }, errorClas
Vue对于class属性的应用
qq_42418169的博客
08-12 754
Vue对于class属性的应用实例类（class）传递方式（注意 class属性需要v-bind:绑定）方式一：以数组的形式方式二：在数组中使用三元表达式方式三：在数组中内嵌对象方式四：直接使用对象，易读写（推荐，推荐，推荐） 实例类（class） <style type="text/css"> .red{ color:#EE3D11; } .thin{ font-weight: 200; } .italic{ font-style: ita
Vue 购物车案例 黑马学院
qq_42316056的博客
11-22 2663
Vue 购物车案例 黑马学院 ，购物车作业，vue2.0作业， v-model 数据双向绑定，axios ，计算属性等等。
Vue动态绑定class
qq_52845451的博客
10-11 464
Vue动态绑定class
Vue TodoList案例
Errol's Blog
04-02 1687
Vue TodoList案例
vue实现购物车小案例
12-13
在这个购物车小案例中，Vue 被用来管理状态并驱动页面交互。下面将详细解释这个案例中的关键知识点： 1. **Vue 实例**： - 在 HTML 中，`<div class="content1" id="content1">` 是 Vue 实例的挂载点，Vue 将在这...
vue动态绑定 class 的丰富案例
最新发布
08-07
本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。
vue 应用案例全解析
12-11
3. 指令系统：Vue提供了一系列预定义的指令，如`v-if`和`v-class`，它们在DOM操作中起到关键作用。`v-if`用于条件渲染，只有当其表达式为真时才会渲染元素。`v-class`则用于根据表达式的值切换元素的CSS类。例如，`...
vue添加class样式实例讲解
01-19
案例中将通过使用:class设置 字体为红色。 1、新建一个html代码页面。 2、在html代码页面创建一个同时添加id为app，并添加一段文本 3、引入vue.js文件。使用标签引入vue文件。 4、创建vue实例。新建一个[removed...
vue + typescript 书签小案例
01-07
在"vue + typescript 书签小案例"中，我们可以预期这是一个使用Vue.js 与 TypeScript 实现的小型应用，可能是用于管理个人书签的工具。这个项目名为“vue-ts-memo”，“memo”通常指的是备忘录或笔记，所以我们可以...
樱花特效
lbs311709000127的博客
12-02 3295
下面是代码，如果感觉有帮助的话留个赞吧。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花雨</title> <script > /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Found...
vue（访问子组件的方法或属性，$children,$refs）
lbs311709000127的博客
12-03 3247
$children:访问子组件。访问子组件的方法：this.$children[0].ontap()； 访问子组件的属性：this.$children[0].name $refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>， 使用this.$refs.aaa.name 运...
vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））
lbs311709000127的博客
11-23 2716
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...
vue（高级函数：filter，map，reduce）
lbs311709000127的博客
11-25 2558
filter filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进行检测。 注意：filter() 不会改变原始数组。 语法 array.filter(function(currentValue,index,arr), thisValue) 详细网址：https://www.runoob.com/j...
vue todolist案例
05-11
可以参考以下代码实现一个简单的 Vue TodoList： ``` <template> <div class="todo-list"> <h1>Vue TodoList</h1> <form @submit.prevent="addItem"> <input type="text" v-model="newItem" placeholder="Add item..."> <button type="submit">Add</button> </form> <ul> <li v-for="(item, index) in items" :key="index"> <span>{{ item }}</span> <button @click="deleteItem(index)">Delete</button> </li> </ul> </div> </template> <script> export default { data() { return { newItem: '', items: [] } }, methods: { addItem() { if (this.newItem !== '') { this.items.push(this.newItem); this.newItem = ''; } }, deleteItem(index) { this.items.splice(index, 1); } } } </script> <style> .todo-list { margin: 0 auto; max-width: 600px; } ul { list-style: none; margin: 0; padding: 0; } li { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #f44336; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; } button:hover { background-color: #d32f2f; } input[type="text"] { padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; font-size: 16px; } </style> ``` 在这个 TodoList 中，我们使用了 `v-model` 指令绑定 `newItem` 变量，通过 `addItem` 方法向 `items` 数组中添加新的项目，并使用 `v-for` 指令渲染出每个项目。同时，在每个项目中，我们添加了一个 `Delete` 按钮，用于删除对应的项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值