vue.js仿盘旋效果的实现方法示例

本文实例讲述了vue.js仿盘旋效果的实现方法。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { margin : 0；padd : 0；列表样式：无；} ul { margin :100 px } Li { width : 50 px高度： 50pxborder: 1px固体；向左浮动：文本对齐：中心；线高： 50px} .act { background : red }/style/head dyul id=' app ' Li @ click=' fun(x)' v-for=' x in num ' : class=' index===x？act ' : ' ' { { x } }/Li/ul/body script src=' http :https://cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/script const app=new Vue({ El : ' # app '，data:{ num:10，index:1，})，methods : { fun(x){ this index=x .这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

希望本文所述对大家vue.js程序设计有所帮助。