注:实例环境 vue cli构建的项目
app.vue
<template>
<Example></Example>
</template>
<script>
import Example from './components/Example'
export default {
name: 'App',
components: {
Example
}
}
</script>
<style>
</style>
Example.vue
<template>
<div>
<label>加法:</label>
<input type="number" v-model="num1"/><span>+</span><input type="number" v-model="num2"/><span>=</span>{{total}}
<hr>
<table>
<thead>
<tr>
<td>学科</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td><input type="text" v-model.number="chinese"/> </td>
</tr>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math"/></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="english"/></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "Example",
data:function () {
return {
num1:0,
num2:0,
newListText:'',
username:'',
age:0,
chinese:97,
math:90,
english:98
}
},
computed:{
sum:function () {
return parseFloat(this.chinese) + parseFloat(this.math) + parseFloat(this.english);
},
average:function () {
return Math.round(this.sum / 3)
},
total:function () {
return parseInt(this.num1) + parseInt(this.num2);
}
}
}
</script>
<style scoped>
</style>
刷新浏览器