本文给出了一个用vue实现标签云效果的例子。分享给大家参考，如下：

闲扯两句

最近想给我的博客添加一个3D标签云效果，来表达我博客文章的分组。在网上找到了画布和A元素实现的解析3D标签云。我想让标签具有可选择性和可点击性，不想在标签数量较多的时候操作A标签，会造成性能问题，所以svg成为了不错的选择。

标签初始化

这里实现的核心主要是参考前面关于分析3D标签云的文章。作者给出了源代码，很容易解释。一般来说，整个代码分为三个步骤：

根据标签的数量，计算分布在球面上的每个标签的x，y，z坐标，根据标签的坐标绘制标签，其中x，y坐标用标签字体的大小和透明度来表示，通过函数根据球旋转的角速度不断计算出新的标签的x，y坐标，创造出旋转效果。通过mousemove事件，根据鼠标坐标值改变球旋转的角速度，制作交互效果，粘贴代码：

div id=' app ' SVG : width=' width ' : height=' height ' @ mouse move=' listener($ event)' a : href=' tag . href ' rel=' external nofollow ' v-for=' tag In tags ' text : x=' tag . x ' : font-size=' 20 *(600/(600-tag . z))3360填充-不透明度

Data: {width:700，//svg width height:700，//SVG height tagsnum 336020，///标签号RADIUS:200，//球半径speedX:Math.PI/360,//一帧中球绕x轴旋转的角度speedY:Math.PI/360,//球-帧绕y轴旋转的角度tags : []}计算出： { CX(){//球中心的x坐标返回this.width/2; }，CY())

Created(){//初始化标签位置让标签=[]；for(设I=0；i this.tagsNumI){ let tag={ }；设k=-1(2 *(I 1)-1)/this . tagsnum；设a=math . acos(k)；设b=a * math.sqrt(这个。tags Nam * math . pi)//计算标签相对于球标签中心的角度. text=I ' tag '；tag.x=这个。CX这个。RADIUS *数学. sin(a) *数学. cos(b)；//根据标签角度计算标签的x、y、z y、z坐标。tag . y=this . cyt his . radius * math . sin(a)* math . sin(b)；tag.z=这个。半径*数学系数(a)；tag . href=' https://img ss . github . io '；//添加一个链接tags.push(标记)到标记；} this.tags=tags//让vue为我们更新视图。}当我们到达这里时，我们计算坐标，vue完成视图更新，然后我们基本上可以得到一个静态图像：

下面是通过改变每个标签的x和y值使球旋转；实现方法是rotateX，rotateY函数：

rotateX(angleX){ var cos=math . cos(angleX)；var sin=math . sin(angleX)；for(let tag of this . tags){ var y1=(tag . y-this。CY) * cos - tag.z *在此。CY；var z1=tag.z * cos (tag.y- this。CY) *罪恶；tag.y=y1标签.=z1} }，rotateY(angleY){ var cos=math . cos(angleY)；var sin=math . sin(angleY)；for(let tag of this . tags){ var x1=(tag . x-this。CX) * cos - tag.z *在这。CX；var z1=tag.z * cos (tag.x - this。CX) *罪恶；tag.x=x1标签.=z1}}，这两个函数根据标签的原始坐标和球的旋转角度计算新坐标。最后，在挂载的钩子下，编写一个动画函数，不断调用这两个函数来实现旋转动画

挂载(){//设置间隔(()={this。rotatex(这个。speedx)；this . Rotatey(this . Speedy)；}，17)}，所有代码如下：

脚本var app=new Vue({ el: '#app '，data: { width:700，height:700，tagsNum:20，RADIUS:200，speedX:Math。PI/360，speedY:Math.PI/360,标签:[]}，计算： { CX(){返回this.width/2; }，CY(){返回this.height/2; } }，创建(){//初始化标签位置让标记=[];用于(设I=0；I this . tagsnumi){ let tag={ }；设k=-1(2 *(I ^ 1)-1)/这个。tagsnum设a=数学。助理文书主任(k)；让b=a *数学。sqrt(这个。数学.PI)；tag.text=i ' tagtag.x=这个CX这个半径*数学。辛(a) *数学。cos(b)；tag.y=这个CY .这个。半径*数学。辛(a) *数学。辛(b );tag.z=这个。半径*数学系数(a)；标签。href=' https://img ss。github。io '；标签。push(标签)；} this.tags=tags}，已安装(){//使球开始旋转setInterval(()={ this。rotatex(这个。SpeedX)；这个。Rotatey(这个。迅速)；}，17) }，方法： { rotateX(angleX){ var cos=math。cos(angleX)；var sin=数学。sin(angleX)；让我们记住这一点。标记){ var y1=(标记。这个.CY) * cos - tag.z *在此CY；var z1=tag.z * cos (tag.y- this .CY) *罪恶；tag.y=y1标签。=z1} }，rotateY(angleY){ var cos=math。cos(angleY)；var sin=数学。罪恶(安格里)；让我们记住这一点。tags){ var x1=(tag。这个.CX) * cos - tag.z *在这CX；var z1=tag.z * cos (tag.x-this .CX) *罪恶；tag.x=x1标签。=z1} }，侦听器（事件){//响应鼠标移动var x=event.clientX - this .CX；var y=event.clientY - this .CY；this.speedX=x*0.00010？Math.min(这个RADIUS*0.00002，x*0.0001) : Math.max(-this .RADIUS*0.00002，x * 0.0001)；this.speedY=y*0.00010？Math.min(这个RADIUS*0.00002，y*0.0001) : Math.max(-this .RADIUS*0.00002，y * 0.0001)；} } })/脚本完整demo vue no vue

总结

vue的数据绑定可以减少我们对数字正射影像图的操作，而将关注点放在逻辑上面，vue构造函数提供的几个选项可以帮助我们更好的组织代码

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