techferment
Published in

techferment

3. Using v-model for Two-Way Binding and Dynamic Style and Class in Vue.js

Two-Way Binding

Binding to Text Input Elements

<div id="app">
<p>Your Name: {{name}}</p>
<input v-model="name" placeholder="Enter Name">
</div>
<script>
new Vue({
el: "#app",
data:()=>({
name: ''
})
})
</script>

Dynamic Style and Class

Binding Styles Dynamically

<div id="app">
<p :style="{ fontSize: fontSize + 'px' }">{{name}}</p>
</div>
<script>
new Vue({
el: "#app",
data:()=>({
name:'This is Title',
fontSize: 10
})
})
</script>

Binding Classes Dynamically

<style>
.redTitle{
color:red
}
.greenTitle{
color:green
}
</style>

<div id="app">
<p :class="a>5?'redTitle':'greenTitle'">{{name}}</p>
</div>
<script>
new Vue({
el: "#app",
data:()=>({
a:3
})
})
</script>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vrijraj Singh

Google Developer Expert for Web Technologies & Firebase | Developer Advocate | GDG Organizer for GDG Jalandhar