[TIL] Vue.js basic 2
双方向データのバインド
入力ラベルに入力した値を画面で表示する場合は、次のような論理を作成できます.
<body>
<div id="app">
<input type="text" @keyup="getValue">
{{ text }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "",
},
methods: {
getValue(e) {
this.text = e.target.value
}
}
});
</script>
</body>v-modelを使用して行うこともできます. <body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "",
},
});
</script>
</body>計算プロパティ
テンプレート内の演算が多すぎると、コードが肥大化し、メンテナンスが困難になります.
<div id="example">
{{ message.split('').reverse().join('') }}
</div> <body>
<div id="app">
{{ reverseMessage }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "안녕하세요"
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>watchプロパティ
ほとんどの場合、計算プロパティは適切ですが、ユーザーが作成したモニタが必要になる場合があります.
<body>
<div id="app">
{{ message }}
<button @click="changeValue">changeValue</button>
{{ updated }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "반갑습니다",
updated: "No",
},
methods: {
changeValue() {
this.message = "안녕히가세요";
this.updated = "Yes";
},
},
watch: {
message(newValue, oldValue) {
console.log(newValue, oldValue);
},
},
});
</script>
</body>Reference
この問題について([TIL] Vue.js basic 2), 我々は、より多くの情報をここで見つけました https://velog.io/@dbgnlcks34/TIL-Vue.js-basic-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol