美文网首页
Vue进行按钮的动态使用

Vue进行按钮的动态使用

作者: Monica_b73c | 来源:发表于2019-03-10 15:58 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Vue进行按钮的动态使用

          本文链接:https://www.haomeiwen.com/subject/fznupqtx.html