<el-col :span="6"> <el-card style="color:#409EFF"> <div><i class="el-icon-user-solid"/>告警总数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">1231</div> </el-card> </el-col> <el-col :span="6"> <el-card style="color:#F56C6C"> <div><i class="el-icon-money"/>销售总量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">¥1000000</div> </el-card> </el-col>如何给这些块赋值
时间: 2023-12-10 08:03:43 浏览: 103
jay-gee-eff:JGF-JSON图表格式npm模块
这些块看起来是用Element UI库的组件编写的。如果你想给这些块赋值,可以通过Vue.js的数据绑定来实现。
你可以在Vue.js的data对象中定义一个变量,例如:
```
data() {
return {
alarmCount: 1231,
salesAmount: 1000000
}
}
```
然后,在模板中使用这些变量来绑定数据,例如:
```
<el-col :span="6">
<el-card style="color:#409EFF">
<div><i class="el-icon-user-solid"/>告警总数</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">{{ alarmCount }}</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card style="color:#F56C6C">
<div><i class="el-icon-money"/>销售总量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">{{ salesAmount | currency }}</div>
</el-card>
</el-col>
```
在这个例子中,我们将Vue.js的数据绑定语法`{{ }}`用于告警总数和销售总量的值。我们还使用了Vue.js的过滤器来格式化销售总量的值为货币格式。
阅读全文