Edited at

Vue textarea @keyup.ctrl.xyz

More than 1 year has passed since last update.


@keyup.ctrl.{keyCode} @input =>oninput

<script src="https://unpkg.com/vue"></script>

<div id="bbb" :class='c'>
<textarea
@keyup.ctrl.13='fred'
@keyup.ctrl.37='forange'
@keyup.ctrl.38='fblue'
@keyup.ctrl.39='fpink'
@keyup.ctrl.40='fgray'
@input='finput'
>{{help}}</textarea>
</div>
<!------------------------>
<style>
textarea{width:33rem;height:6rem;}
#bbb{transition:background-color 0.3s ease-in-out;}
.red{background-color:red}
.orange{background-color:orange}
.blue{background-color:blue}
.pink{background-color:pink}
.gray{background-color:gray}
</style>

new Vue({

el:'#bbb'
,data:{c:'blue',help:'color change is ctrl+enter,ctrl+ 4arrow key'}
,watch:{//v-model:x is watch the x
//v:function(n,o){this.check(n,o)}
}
,methods:{
fred:function(ev){ this.c='red' }
,forange:function(ev){this.c='orange' }
,fblue:function(ev){this.c='blue' }
,fpink:function(ev){this.c='pink' }
,fgray:function(ev){ this.c='gray'}
,finput:function(ev){
console.log(ev)
}
}
})


追記 contenteditable も同様

 <div contenteditable="plaintext-only"           

@keyup.ctrl.13='fred'
@keyup.ctrl.37='forange'
@keyup.ctrl.38='fblue'
@keyup.ctrl.39='fpink'
@keyup.ctrl.40='fgray'
@input='finput'
>{{help}}</div>


省略記法の挙動

//work!

<div... v-on="{
input:finput
}"
>

//dont work! json . is error. keyup[.]<---

v-on="{ keyup.ctrl.13 :fred
,keyup.ctrl.38 :fblue
,keyup.ctrl.39 :fpink
,keyup.ctrl.40 :fgray
}"