vue教程:v-on指令监听事件-在方法中访问属性、修改属性

说明

如下图,点击 分数是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>

原文出处:/show_1IX8U8jmQ7jW.html