Vue中的@blur/@focus事件怎么使用

这篇文章主要讲解了“Vue中的@blur/@focus事件怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的@blur/@focus事件怎么使用”吧！

Vue的@blur/@focus事件

• @blur 是当元素失去焦点时所触发的事件

• @focus是元素获取焦点时所触发的事件

 <template>  <div>    <!--    @blur 当元素失去焦点时触发blur事件    -->    <div>      <input type="text" placeholder="请输入内容" @blur="blurText"/>    </div>   </div></template> <script>    export default {      name: "commitText",      methods:{        blurText(){          console.log("blur事件被执行了")        }      }    }</script> <style scoped> </style>

focus和blur事件，改变选中时搜索框的背景色

template

<div class="search-box" ref="searchBoxOfChatRoom">    <i class="fa fa-search" aria-hidden="true"></i>    <input        ref="searchOfChatRoom"        class="chatroom-search"        type="search"        placeholder="搜索群成员"        @focus="changBackground(1)"        @blur="changBackground(2)"    ></div>

js

changBackground (flag) {  switch (flag) {    case 1:      console.log('获取焦距')      this.$refs.searchBoxOfChatRoom.style.background = 'white'      this.$refs.searchOfChatRoom.style.background = 'white'      break    case 2:      console.log('失去焦距')      this.$refs.searchBoxOfChatRoom.style.background = '#dadada'      this.$refs.searchOfChatRoom.style.background = '#dadada'      break    default:      break  }}

感谢各位的阅读，以上就是“Vue中的@blur/@focus事件怎么使用”的内容了，经过本文的学习后，相信大家对Vue中的@blur/@focus事件怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！