If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.
In this Vue.js post I'll continue with forms but also introduce you to conditional rendering using the v-if/v-else/v-else-if directives. Yes, Vue.js will allow you to set up conditional code to view/display/execute other page elements based on conditional logic. It follows the basic conventions of other programming languages and is really easy to use.
<!doctype html>
<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>
</head>
<body>
<div id="app">
<form>
<fieldset>
<legend>Sport Interests</legend>
<div>
<input type="checkbox" value="Goalie" v-model="sportInterests">Goalie
</div>
<div>
<input type="checkbox" value="Forward" v-model="sportInterests">Forward
</div>
<div>
<input type="checkbox" value="Winger" v-model="sportInterests">Winger
</div>
<input type="submit" value="Register"><br><br>
<!--<p>Your selected sport interests include: {{sportInterests.join(', ')}}</p>-->
<!--
You can also use the "v-if" directive instead of "v-show", which will completely remove the element from the DOM when the expression is false.
"v-else" can be used immediately after "v-if" (just like an if/else statement)
-->
<p v-if="sportInterests.length==3">Yikes! You made too many selections, take it easy!</p>
<p v-else-if="sportInterests.length > 0">
Your selected sport interests include: {{sportInterests.join(', ')}}
</p>
<p v-else>Please select at least one sport interest.</p>
</fieldset>
</form>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
newEmail: 'rich@cfsnap.com',
sportInterests: []
}
})
</script>
</html>