说明
如下图,点击 分数是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>
var app = new Vue(
{
el: '#app', //el是element缩写
data: { //数据
msg: 'Hello Vue!',
score:90,
},
methods:{
change1(){
this.score = 90
},
change2(){
this.score = 80
},
change3(score){
this.score = score
}
}
})
</script>
