vue 将data和data_unit两个字段拼接展示，如果data_unit为m，则将data除以60，然后与H拼接

您可以通过计算属性来实现这个需求。假设您的数据模型如下：

data: 120,
data_unit: 'm'

您可以在Vue组件中定义一个计算属性来进行拼接展示：

computed: {
  displayData() {
    if (this.data_unit === 'm') {
      return `${Math.floor(this.data/60)}H`
    } else {
      return `${this.data}${this.data_unit}`
    }
  }
}

在模板中使用 `displayData` 展示拼接后的值：

<p>{{ displayData }}</p>

这样，当 `data_unit` 为 `m` 时，`displayData` 会返回将 `data` 除以60后再与 `H` 拼接的字符串，否则会返回 `data` 和 `data_unit` 直接拼接的字符串。

相关问题

vue 将data 和data_unit两个字段拼接展示在页面中，当data_unit值为m时，将data除以60后拼接

您好，关于您的问题，可以通过以下方式实现：

在Vue的模板语法中，可以使用三元表达式来根据条件渲染不同的内容。具体来说，可以先定义一个计算属性（computed），来根据data_unit的值返回对应的数据，然后在模板中使用三元表达式来判断是否需要将data除以60后再拼接展示。

示例代码如下：

<template>
  <div>
    {{ computedData }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 120,
      data_unit: 'm'
    }
  },
  computed: {
    computedData() {
      if (this.data_unit === 'm') {
        return this.data / 60 + 'm'
      } else {
        return this.data + this.data_unit
      }
    }
  }
}
</script>

在上面的代码中，我们定义了一个计算属性computedData，根据data_unit的值来判断是否需要将data除以60后再拼接展示。如果data_unit不等于'm'，则直接将data和data_unit拼接起来；否则将data除以60后再拼接'm'。

在模板中直接使用computedData即可展示最终的数据。

vue 将后端接口传来的data和dataUnit两个字段拼接已列表的形式展示，如果dataUnit为m，则将data除以60，然后与H拼接

您好！针对您的问题，可以按照以下步骤进行处理：

1. 在vue中，可以使用axios或者fetch等工具从后端获取数据。

2. 获取到数据后，可以使用v-for指令渲染成列表的形式展示。

3. 在v-for指令中，可以使用computed属性对dataUnit字段进行判断，如果为m则将data字段除以60，然后与H拼接。

具体代码如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataList" :key="index">
        {{ item.dataUnit === 'm' ? (item.data / 60 + 'H') : item.data }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    // 使用axios或者fetch等工具从后端获取数据，假设数据为response
    const response = [
      { data: 120, dataUnit: 'm' },
      { data: 30, dataUnit: 's' },
      { data: 240, dataUnit: 'm' }
    ]
    this.dataList = response
  }
}
</script>

在上述代码中，使用了v-for指令遍历dataList数组中的每个元素，使用三元表达式对dataUnit字段进行判断，如果为m则将data字段除以60并与H拼接，否则直接输出data字段。最终渲染成一个ul列表展示在页面上。