时间:2021-05-26
本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考,具体如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ margin:100px ; } li{ width: 50px; height: 50px; border: 1px solid; float: left; text-align: center; line-height: 50px ; } .act{ background: red; } </style></head><body><ul id="app"> <li @click="fun(x)" v-for="x in num" :class="index===x?'act':''">{{x}}</li></ul></body><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><script> const app=new Vue({ el:"#app", data:{ num:10, index:1, }, methods:{ fun(x){ this.index=x } } })</script></html>这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:
希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示。表格数据先定
现在来系统地学习一下Vue(参考vue.js官方文档):Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件。Vue.js
前言为了练习vue.js之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数
今天给大家分享下vue.js中的计算属性(computed)示例一computed的get属性html:{{fullName}}js:exportdefault
在这篇文章之前小颖分享过小颖自己写的组件:Vue.js组件tabs实现选项卡切换效果和Tree升级版(实现省市多级联动)先给大家看下小颖写了一个简单的组件示例: