Vue进行按钮的动态使用

2019-03-10  本文已影响0人  Monica_b73c

1.使用到的图标小知识

1.1需要用到的网站:点此进入,进入后如图操作查找你需要使用的小图标

image.png

1.2图标的使用:<i class="此处填写图标的代码*"></i> 此处填写标识文字

1.3使用小图标功能时,需要先在项目中添加两个文件夹,如图所示 image.png

1.4在使用小图标前,要在代码前加入这行代码:

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
其中href中填写文件路径,每个人的可能都不一样,但是一般会智能感应出来的

2.编写fuction方法添加函数对按钮进行控制,图示代码为让值始终取反,在使用关注按钮时会使用到 image.png

3.在Style中进行对按钮的美化进行一系列设置

image.png

4.在按钮中实现function中的方法 image.png

5.以下是script中的代码

image.png

6.用函数方法对点赞数进行控制 image.png

7.用函数方法通过按钮实现年龄的增加减少,并进行约束判断 image.png

上一篇下一篇

猜你喜欢

热点阅读