ref 属性を使って参照するための名前をタグに付けておくと、その DOM に直接アクセスできます。
<input type="text" ref="comment">
ref 属性で名前を付けたタグは、メソッド内から次のように使用できる
this.$refs.名前
<!DOCTYPE html>
<script
src="<https://unpkg.com/[email protected]>"
>
</script>
<div id="app">
{{ message }}
</div>
const vm = new Vue({
el: '#app',
data() {
return {
message: 'Hello',
}
}
})
vm.$watch(function () {
return this.message
}, function(message) {
console.log('変更の値:' + message)
})
例：数字に三桁区切りでカンマをつける場合
<!DOCTYPE html>
<script src="<https://unpkg.com/[email protected]>"></script>
<div id="app">
<p>合計 {{ sum | numberWithDelimiter }} 円</p>
</div>
const vm = new Vue({
el: '#app',
data() {
return {
sum: 300000000
}
},
filters: {
numberWithDelimiter(value) {
if (!value) return '0'
return value.toString().replace(/(\\d)(?=(\\d{3})+$)/g, '$1,')
}
}
})
動的プロパティを使用するのに使う
下記の例だと、this.counterの値が更新される度にlessThanThreeプロパティが変更される
new Vue({
data: {
counter: 0
},
computed: {
lessThanThree: function() {
return this.counter > ? '3より上' : '3以下';
}
}
})