web-dev-qa-db-ja.com

要素値の変更に関するVuejsイベント？

次のような変更を監視したい要素があります。

<span id="slider-value-upper" class="lower">50</span>

これをvuejsできれいに行うことは可能ですか？ドキュメントを調べてみましたが、このようなものは見つかりませんでした。

VueJsで '50'が他の何かに変わるたびにカスタムイベントを起動したい。

javascriptelementvue.js
19
Stephan-v

watch で試しましたか？あなたの場合、それはこのようなものでしょう。

template

<div id="app">
    {{ message }}
    <span id="slider-value-upper" class="lower">{{myValue}}</span><br />
    <input v-model="myValue">
</div>

jsコード

new Vue({
    el: '#app',
    data: {
        message: 'Watch example',
        myValue: 50
    },
    watch: {
        'myValue': function(val, oldVal){
        if (val < 50) {
            this.message= 'value too low!';
        }else{
          this.message= 'value is ok';
        }
      }
    }
})

チェックアウト the example

31
Yerko Palma