Vue 数据绑定实战：动态生成列表项并设置样式

本文将以一个简单的例子演示如何使用 Vue 的 v-for 指令来动态生成列表项，并通过插值表达式 {{ }} 将数据绑定到列表项的样式和内容，实现动态显示效果。

代码示例

<div class='list-box' style='height: 220px;'>
  <div class='list-item user-list-item' v-for='item in 10' :key='item' v-model='AccessLogs'>
    <el-row>
      <el-col :span='2'><svg-icon icon-class='user'></svg-icon></el-col>
      <el-col :span='4'>张*伟</el-col>
      <el-col :span='4' :class='item%3 == 1? 'green-color' : item%3 == 2? 'blue-color' : 'yellow-color''>{{ item%3 == 1? '访客' : item%3 == 2? '员工' : '黑名单' }}</el-col>
      <el-col :span='8'>340**471216</el-col>
      <el-col :span='6'>9.19/8:00</el-col>
    </el-row>
  </div>
</div>

数据绑定分析

v-for 指令： 使用 v-for='item in 10' 循环遍历一个长度为 10 的数组，生成 10 个列表项。
插值表达式： 使用 {{ }} 将 item 绑定到 class 属性和文本内容上。
条件判断： 通过 item%3 == 1、item%3 == 2 等条件判断，根据 item 的值设置不同的类名和文本内容，实现不同的样式和显示效果。

总结

通过使用 v-for 指令和插值表达式，可以轻松实现数据绑定，动态生成列表项并设置不同的样式和文本内容，使页面更具交互性和灵活性。