vue写多个class

2024-11-02

Vue中动态添加多个class

vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单先看一下示例: 代码 <template> <section class="p-10 cursor-pointer"> <p :class="`${condition1 ? 'font' : ''}${condition1 ? ' size' : ''}`&quo

vue写出放大镜的效果

用vue写出放大镜查看图片的效果. 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { imgZoom } 标签 <img-zoom src="img-samll.jpg" width="450" height="250" bigsrc="img-big.jpg" :configs="configs&q

用ES6的class模仿Vue写一个双向绑定

原文地址:用ES6的class模仿Vue写一个双向绑定点击在线尝试一下最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._compile() t

用vue写一个仿简书的轮播图

原文地址:用vue写一个仿简书的轮播图先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.可以将轮播图看成两个,如图所示: 写好每个class的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $sWidth: $width - $bWidth; // 小图片宽度 $sHeigh

使用Vue写一个九九乘法表

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表,还请多多指教! 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src=&quo

用vue 写h5页面-摇一摇

vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js 我使用的github 项目要点赞(现在要养成习惯) 使用:在vue的一个组件里使用这个插件. 接下来我们看这个插件提供的api,灵

原创《开源一个用 vue 写的树层级组件 vue-ztree》

最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.treejs.cn/v3/demo.php 演示地址: vue-ztree(vue 1.0版本) 演示地址:http://lisiyizu.github.io/vue-ztree/ vue-ztree-2(vue 2.0版本) 演示地址:http://lisiyizu.github.io/vue-ztree

利用vue写filter时当传入是一个对象时注意

vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例子会产生undefined的对象值下面的例子是利用vue vant ,arrtoArr是将['0','2']---->'问题1,问题3'的格式在页面中显示页面 <div v-for="item,index in list" v-if="list.length!=

用vue写一个仿app下拉刷新的组件

如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- <transition> <div class="refresh-wrapper" ref="refresh"> <div class="refresh-inner"> <div class="refr

一个用 vue 写的树层级组件 vue-ztree

最近看了大神的关于vue-ztree的博客,感觉很赞,于是摘抄下来,方便自己学习,机智girl,哈哈哈O(∩_∩)O 最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.treejs.cn/v3/demo.php 演示地址: vue-ztree(vue 1.0版本) 演示地址:http://lisiyizu.github.io/vue-ztree/ vue-

Jquery会死吗？我为什么不用vue写富文本！

一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已经落后,不久将死.甚至有少数网友很激进:非vue技术栈,你不应该加入我这个群,不管你做得多好.对应这个事情,首先我一般不反驳,因为我对vue,jquery有自己的应用场景度量.但是对于这种不分场景应用而盲目赶潮流的观点,我是持否定态度的. 为此我想有必要通过这篇文章,说明一下:我为什么用jquery

使用vue写扫雷游戏

上班闲来没事做,,心血来潮.想用刚学的vue,写一个扫雷游戏..好了,直入正题. 第一步,先制作一个10x10的格子图..这个divcss就不说了..大家都会. 第二步,制造一个数组,用来生成随机雷区. let arr = [] for (var i = 0; i < 10; i++) { arr.push(Math.floor(Math.random() * 100)) } 第三步,制造一个json数组,让他循环生成页面上的格子. let arrs = [] for (var j = 0; j

阿望教你用vue写扫雷（超详细哦）

前言话说阿望还在大学时,某一天寝室突然停网了,于是和室友两人不约而同地打开了扫雷,比相同难度下谁更快找出全部的雷,玩得不亦乐乎,就这样,扫雷伴我们度过了断网的一周,是整整一周啊,不用上课的那种,可想而知我们是有多无聊了. 这两天临近过年了,该放假的已经放假了,不该放假的已经请假了,公交不打挤了,地铁口不堵了,公司也去了大半部分的人了,就留阿望这种不得不留下来值班的人守着空荡荡的办公室了,于是,多年前那种无所事事的断网心态再次袭来,于是,想玩扫雷的心再次蹦跶出来,于是,点开了电脑的附件,于是,发

[Vue]写一个简单的文件上传控件

这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传使用Element的uploader控件,上传文件的行为和样式不用自己全部实现,使代码简化.且有足够的扩展性,文件传输请求的代码可以基于axios完全自己重写.我们只用关心核心代码. 搭建项目框架首先建立一个空白的项目,引入Element控件库,具体的操作和使用Element控件库请看官方文档: 组件 | Elemen

vue写请求接口--请求参数的变量要在return里面声明

//谨记return里面是返回所有声明的变量的名字,数组以及对象等等 export default { data () { return { //所有的变量都是写在data 的return里面的,主要错误点在于请求参数的变量要在这里声明: imgGroup: { user: require('../static/images/icon/user-ava.png'), payment: require('../static/images/icon/wait-payment.png'), deliv

用vue写添加数据、删除数据、筛选数据表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="../libs/vue1026.js"></script> </head> <style> #app { width: 800px; margin: 20px auto; } #tb { width:

在上线项目中，用Vue写一个星级评价

先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)"> <img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)"> <img :src

vue写后台管理系统问题概述和解决方案

一个不错的Demo; http://xmall.exrick.cn/#/home 源码:https://gitee.com/Exrick/xmall-front/blob/master/src/page/Login/login.vue 1. vue如何通过axios向后端发送一个数组. data: qs.stringify({ meg: this.msg }, { indices: false }) msg:

vue写template的4种形式

1.template标签(非单文件组件) <template id="t1"> <h2>66666666</h2> </template> <script> new Vue({ template: '#t1' }) </script> 2.template标签单页面组件和上面一样用<template></template>,由于有vue-loader编译不需要在手动在选项template上

使用Vue写一个登陆页面并在管理页面查看和修改

注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css/register.css"> <link rel="stylesheet&q

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码结构html: <template>

vue写多个class

热门专题