vue$refの基本的な使い方
1、一般的なラベルに使う
これによりvueでは$refを使用してdomノードを取得し、いくつかのdomの操作を行うことができます.
次の例では、input入力ボックスの文字数を制御します.
2、サブコンポーネントに使用して、サブコンポーネントの属性値を取得することができます.サブコンポーネントに属性newsがあると仮定します.
これによりvueでは$refを使用してdomノードを取得し、いくつかのdomの操作を行うことができます.
次の例では、input入力ボックスの文字数を制御します.
new Vue({
el:'#app',
data:{
active:{'name':''}
},
watch:{
active:{
handler:function(){
var _this = this;
var _sum = 4; // 4
_this.$refs.count.setAttribute("maxlength",_sum);
},
deep:true
}
},
})
2、サブコンポーネントに使用して、サブコンポーネントの属性値を取得することができます.サブコンポーネントに属性newsがあると仮定します.
new Vue({
el:'#app',
mounted:function () {
console.log(this.$refs.hdnews.news);
console.log(this.$refs.hdinfo.news);
}
})