<三>computed 和事件的繫結
阿新 • • 發佈：2021-12-11
1、計算屬性computed和methods 的區別在於computed 優先使用快取，methods實時更新，如果message變更，其他兩個值也會變更。
<body>
<div id="app">
<p>原始字串: {{ message }}</p>
<p>計算後反轉字串: {{ reversedMessage1() }}</p>
<p>計算後反轉字串: {{ reversedMessage }}</p>
</div>
<script src="
2、上面的例子是反轉欄位/方法依賴message,所以message一變更，其他兩個也會變更。那如果反過來呢，那就要用到setter了。
<body>
<div id="app">
<div>{{ hello }}</div>
<div>{{ vu }}</div>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
hello: '',
vu:''
},
computed: {
fullUrl:{
get: function () {
return this.hello+' '+this.vu;
},
set:function(newvalue){
var str = newvalue.split(' ');
this.hello = str[0];
this.vu = str[str.length - 1]
}
}
}
});
app.fullUrl='hello vue';
</script>
3、v-on事件繫結
<body>
<div id="app">
<button v-on:click="showname('vue')">{{name}} {{time}}</button>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
time:0
},
methods: {
showname:function(message){
this.name=message;
this.time=this.time+1;
}
}
});
</script>
按鍵修飾符 v-on:keyup.13 捕捉keycode為13的按鍵，vue提供了一些常用的按鍵別名
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit"> .enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta