一、自訂索引名 ($refs)
自訂索引名有點像是 id 一樣,假設在元件上設定 ref myBlock,就可以用 this.$refs.myBlock 取得 DOM 元素。<template> <input v-model.number="heightModel" type="number"> <div ref="myBlock" class="border border-danger"> Block </div> </template> <script> export default { data() { return { height: 50, }; }, computed: { heightModel: { get() { return this.height; }, set(height) { this.height = height; this.changeHeight(height); }, }, }, mounted() { if (this.height) { this.changeHeight(this.height); } }, methods: { changeHeight(height) { this.$refs.myBlock.style.height = `${height}px`; }, } } </script>
二、自定義指令 (custom directive)
常用的 v-model 就是一種指令(directive),你也可以自訂指令方便全域使用。若定義 focus,在 template 上就使用 v-focus:// Register a global custom directive called `v-focus` Vue.directive('focus', { // When the bound element is inserted into the DOM... inserted: function (el) { // Focus the element el.focus() } })
<template> <input v-model.number="height" type="number"> <div v-height="height" class="border border-danger"> Block </div> </template> <script> export default { directives: { height: (el, binding) => { el.style.height = `${binding.value}px`; }, }, data() { return { height: 50, }; }, } </script>
See the Pen Vue.js Reference ID VS Custom Directives by chenuin (@chenuin) on CodePen.