vue.js の loop
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p v-for="color in colors">{{ color }}</p>
</div>
JS
const app = Vue.createApp({
data: () => ({
colors: ['black', 'white', 'orange']
})
})
app.mount('#app')
結果は以下の通り、loop して値を取得できる
表示非表示を切り替える
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p v-if="toggle">hello</p>
</div>
JS
const app = Vue.createApp({
data: () => ({
toggle: true
})
})
app.mount('#app')
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<input type="text" v-bind:value="message">
</div>
JS
const app = Vue.createApp({
data: () => ({
message: 'hello'
})
})
app.mount('#app')
vue.js のデータバインディングの仕組みを紹介。
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
{{ message }}
</p>
</div>
js
console.log(Vue.version)
const app = Vue.createApp({
data: () => ({
message: "hello"
})
})
app.mount('#app')
テキストボックスを変更すると、js の message が変更され、html に反映される
