vue-通过数组实现文字字体变色

vue的API文档：https://cn.vuejs.org/v2/guide/syntax.html
API文档中对指令的解释：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
按我的理解指令有点像命令，通过特定的指定，对元素进行赋值，点击事件，js运算等等各种操作。
这里使用v-bind，v-on指令进行练习。

 <div id="demo5">
        <p v-bind:class="color">我是會变色的文字</p>
        <button v-on:click="d5color">变色</button>
 </div>

v-bind:在这里 class 是参数，告知 v-bind 指令将该元素的 color attribute 与表达式 class 的值绑定。
v-on:监听 DOM 事件

css样式

<style type="text/css">
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
    .black{
        color: black;
    }
    .yellow{
        color: yellow;
    }
</style>

html模块

<div id="demo5">
        <p v-bind:class="color">我是會变色的文字</p>
        <button v-on:click="d5color">变色</button>
    </div>

js脚本
引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

实现文字变色脚本

 <script>
        var data=['red','black','blue','yellow'];
        var demo5=new Vue({
            el:'#demo5',
            data:{
                color:data[0]
            },
            methods: {
                d5color:function () {
                    var c=demo5.color;
                    console.log(c+"===============");
                    for (var i=0;0<i<data.length;i++){
                       if (c==data[i]){
                           if (i+1<data.length){
                               c=data[i+1];
                               demo5.color=c;
                               console.log(c+"--------------end"+demo5.color);
                               break;
                           }else {
                               demo5.color=data[0];
                               console.log(c+"--------------restart"+demo5.color);
                               break;
                           }
                       }
                    }
                }
            }
        })
       </script>

实现效果