vue使用watch监听显示一个list中成绩大于90以上的人数

可以使用computed属性来计算成绩大于90的人数，然后在模板中显示即可。具体代码如下：

<template>
  <div>
    <p>成绩大于90的人数：{{ count }}</p>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}：{{ item.score }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', score: 80 },
        { id: 2, name: '李四', score: 95 },
        { id: 3, name: '王五', score: 88 },
        { id: 4, name: '赵六', score: 92 },
      ],
    };
  },
  computed: {
    count() {
      return this.list.filter(item => item.score > 90).length;
    },
  },
};
</script>

相关问题

vue2watch监听一个函数

在Vue2中，我们可以使用watch来监听一个函数的变化。具体的用法是在watch对象中添加一个属性，属性名为要监听的函数的名称，属性值为一个回调函数。当这个函数发生变化时，回调函数会被触发。例如：

new Vue({
  data: {
    count: 0
  },
  watch: {
    // 监听函数的名称为myFunction
    myFunction: function(newVal, oldVal) {
      // 在函数发生变化时执行的操作
      console.log('函数发生了变化');
      console.log('新值为：', newVal);
      console.log('旧值为：', oldVal);
    }
  },
  methods: {
    // 定义一个函数myFunction
    myFunction: function() {
      // 函数的具体实现
    }
  }
})

在上面的例子中，我们定义了一个名为myFunction的函数，并将它添加到watch对象中。当myFunction函数发生变化时，回调函数会被触发，打印出新值和旧值。这样我们就可以在函数发生变化时执行一些操作了。
#### 引用[.reference_title]
- *1* *3* [Vue2 Watch监听](https://blog.csdn.net/m0_61093181/article/details/130379188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue的watch监听函数](https://blog.csdn.net/wwf1225/article/details/106590301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue2 watch监听list

在Vue2中，可以使用watch选项来监听数组（例如list）的变化。当数组中的元素发生变化时，可以执行相应的回调函数。引用中提到了一些注意点和用法。

一个简单的例子如下所示：

new Vue({
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        console.log('list发生变化', newVal, oldVal);
      },
      deep: true
    }
  }
});

在这个例子中，当list数组中的元素发生变化时，控制台会打印出新值和旧值。通过设置deep选项为true，可以深度监听数组的变化。

注意，这里只是一个简单的例子，具体的用法和写法可能会因项目的需求而有所不同。请根据具体情况进行调整和使用。引用提供了更多关于watch的用法和写法的参考资料。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [详解vue2 $watch要注意的问题](https://download.csdn.net/download/weixin_38642349/14824073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue2.0 watch监听](https://blog.csdn.net/promise466/article/details/127026415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue中watch监听数据变化的使用](https://blog.csdn.net/m0_72027585/article/details/131203172)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]