vue3教程：v-on指令监听事件-在方法中访问属性、修改属性-马育民老师

# 说明

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

[![](/upload/0/0/1IX8U8j4Tr0R.png)](/upload/0/0/1IX8U8j4Tr0R.png)

```
<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>
```

原文出处：http://malaoshi.top/show_1GWRfKfriZo.html