Commit 91743819 authored by Michael Jörg's avatar Michael Jörg

Form Input Bindings

parent a8e8bcec
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vue.js Guide</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>Form Input Bindings</h1>
<h2>Text</h2>
<div id="example-1">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
<h2>Multi-line Text</h2>
<h2>Checkbox</h2>
<div id="example-3">
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<h2>Radio</h2>
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
el: "#example-1",
data: {
message: "",
},
});
new Vue({
el: "#example-3",
data: {
checked: false,
checkedNames: [],
},
});
new Vue({
el: "#example-4",
data: {
picked: ''
},
});
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment