这次是比较麻烦的几个指令。
v-on指令
<button v-on:click="doThis"></button>
可缩写为
<button @click="doThis"></button>
click后的方法名与methods的方法名一致
var app = new Vue({
el: '#app',
methods:{
doThis:function () {
console.log('clicked');
} })
鼠标移入移出事件
<button v-on="{ mouseenter:onEnter , mouseleave:onOut}" v-on:click="onClick()" id="app">点我</button>
表单上的事件
<form @keyup.enter="onKeyenter" v-on:submit="onSubmit($event)">
<!-- <form v-on:submit.prevent="onSubmit"> -->防止页面刷新,自动提交
<input type="text"></input>
<input type="submit"></input>
</form>
var app = new Vue({
el: '#app',
methods:{
onSubmit:function (e) {
e.preventDefault();//e防止刷新自动提交
console.log('submit');
},onKeyenter:function(){
console.log('enter');
} })
v-bind指令
v-bind指令用于绑定,可绑定a链接,也可绑定图片地址,也可以绑定class、style等。
a链接
<a v-bind:class="klass" v-bind:href="url"></a>
可缩写为
<a :class="klass" :href="url"></a>
var app = new Vue({
el: '#app',
data:{
url:'http://baidu.com',
klass:'btn btn-default',//此为bootstrap的一个按钮样式
}
})
图片地址
<img v-bind:src="img">
var app = new Vue({
el: '#app',
data:{
img:'../image/3.jpeg',
}
})
绑定style
<style type="text/css">
.active{
background: red;
}
</style>
<a :class="{active:isActive}" :href="url"></a>
var app = new Vue({
el: '#app',
data:{
isActive:true//false
}
})
computed计算
用v-model动态绑定数据,方便修改后检测计算是否正确
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math" /></td>
</tr>
<tr>
<td>语文</td>
<td><input type="text" v-model.number="Chinese" /></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="English" /></td>
</tr>
<tr>
<td>总分</td>
<td><input type="text" v-model.number="sum" /></td>
</tr>
<tr>
<td>平均分</td>
<td><input type="text" v-model.number="average" /></td>
</tr>
</tbody>
</table>
</div>
var app = new Vue({
el: '#app',
data:{
math:80,
Chinese:90,
English:89
},
computed:{
sum:function () {
return parseFloat(this.math)+parseFloat(this.Chinese)+parseFloat(this.English);
},
average:function(){
return Math.round(this.sum/3)
}
}
})