在vue里如何给v-for循环出来的元素设置不同的样式

在vue里如何给v-for循环出来的元素设置不同的样式在vue里如何给v-for循环出来的元素设置不同的样式_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app" style="width:500px; margin:0 auto">
        <el-button v-for="(buttonArr, index) in buttons" :class="arr[index]">{
     {
     buttonArr.primary}}</el-button>
    </div>
</body>
<script>
  var app = new Vue({
     
      el:"#app",
      data(){
     
          return{
     
           buttons:[{
     
              primary:'默认按钮'
           }, {
     
              primary:'默认按钮' 
           }, {
     
              primary:'默认按钮' 
           },{
     
              primary:'默认按钮' 
           }],
           arr: [
          "ss1",
          "ss2",
          "ss3",
          "ss4",
        ]
          }
      }
  })
</script>
</html>

你可能感兴趣的:(vue)