说明

如下图，点击 分数是90 的按钮，下面分数显示90，评价显示良

<div id="app">

    <button v-on:click="change1">分数是90</button>
    <button v-on:click="change2">分数是80</button>
    <button @click="change3(70)">分数是70</button>
    <button @click="change3(60)">分数是60</button>
    <button @click="score = 50">分数是50</button>

    <div>分数：{{score}}</div>
    <div>评价：
        <span v-if="score>=90">优</span>
        <span v-else-if ="score>=80">良</span>
        <span v-else-if ="score>=70">中</span>
        <span v-else-if ="score>=60">差</span>
        <span v-else>不及格</span>
    </div>
</div>

<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return{
            msg: 'Hello Vue!',
            score:90,
        }
    },
    methods:{ // 在 methods 对象中定义方法
        change1(){
            this.score = 90
        },
        change2(){
            this.score = 80
        },
        change3(score){
            this.score = score
        }
    }

  }).mount('#app')
</script>

原文出处：/show_1GWRfKfriZo.html