vue学习笔记-2 控制流指令 计算属性

122 阅读1分钟
<div id = "app">
<div v-if"role=='admin'">
管理员你好
</div>
<div v-else-if"role==hr">
HR你好
</div>
<div v-else>
您没有权限访问此页面
</div>

var app = new Vue({
    el:'#app',
    data:{
        math:90,
        physics:80,
        english:30,
    }
    computed:{          //计算属性
        sum:function(){
            return this.math +this.physics+this.english
        }
        average:function(){
            return math.round(this.sum/3)
        }
    }
})
-----------------
<table>
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td>{{math}}</td>
</tr>
<tr>
<td>物理</td>
<td>{{physics}}</td>
</tr>
<tr>
<td>英语</td>
<td>{{english}}</td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>

</tbody>
</table>