学无先后,达者为师

网站首页 编程语言 正文

所有文章标题显示为彩色,自定义指令v-rainbow

作者:顽强的小豆子 更新时间: 2022-07-10 编程语言

第一、在vue文件,h3标签加入 v-rainbow

----------------------------------ShowBlogs.vue----------------------------------
<template>

  <div class="ShowBlogs">

      <input type="search" placeholder="请输入文章标题或关键字..." v-model="search">

      <br>

      <div class = "article-show" v-for="(item,index) of filterblogList" :key=index>

        <h3 v-rainbow>{{item.title}}</h3>

      </div>

  </div>

</template>

第二、在main.js中定义自定义指令,rainbow跟上面的v-rainbow保持一致

Vue.directive('rainbow', 
  function(el) {
    el.style.color = '#'+Math.random().toString().slice(2,8);
  
})

原文链接:https://blog.csdn.net/qiuyushuofeng/article/details/122763489

栏目分类
最近更新