Arquivo de opções
As opções do menu vertical estarão, como dissemos, armazenadas em um array de nome opcoes:
opcoes: [
{ titulo: 'Caminhante', imagem: 'caminhante.jpg', checked: true },
{ titulo: 'Ciclista', imagem: 'ciclista.jpg', checked: true },
{ titulo: 'Cavaleiro', imagem: 'cavaleiro.jpg', checked: true }
]
{ titulo: 'Caminhante', imagem: 'caminhante.jpg', checked: true },
{ titulo: 'Ciclista', imagem: 'ciclista.jpg', checked: true },
{ titulo: 'Cavaleiro', imagem: 'cavaleiro.jpg', checked: true }
]
Os campos titulo contém os rótulos das opções de menu. Os campos imagem contém o nome das imagens que serão mostradas à esquerda dos rótulos. Os campos checked contém um valor true ou false, para que o editor e o publicador de conteúdo possa suprimir ou recuperar opções do menu, sem ter que apagar ou inserir linhas de programação.
Template HTML
Para fazer as opções serem exibidas, o trecho HTML com as inclusões VUE será o seguinte:
<ul style="list-style-type: none;">
<li v-for="opcao in opcoes" v-if="opcao.checked">
<div class="checkbox">
<label>
<img border=0 v-bind:src="opcao.imagem"> <big>{{opcao.titulo}}</big>
</label>
</div>
</li>
</ul>
<li v-for="opcao in opcoes" v-if="opcao.checked">
<div class="checkbox">
<label>
<img border=0 v-bind:src="opcao.imagem"> <big>{{opcao.titulo}}</big>
</label>
</div>
</li>
</ul>
Código completo
<html><head>
<title>Menu Vert.</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
function init(){
// Comando 1
var data = {
opcoes: [
{ titulo: 'Caminhante', imagem: 'caminhante.jpg', checked: true },
{ titulo: 'Ciclista', imagem: 'ciclista.jpg', checked: true },
{ titulo: 'Cavaleiro', imagem: 'cavaleiro.jpg', checked: true }
],
cabecalho: 'SUPORTE',
novoLivro: '',
novoimagem: ''
};
// Comando 2
new Vue({
el: '#app',
data: data
});
}
</script>
<style>
div#app.container {
width: 360px;
}
</style>
</head>
<body onload="init();">
<div id="app" class="container">
<center>
<h2>{{cabecalho}}</h2>
</center>
<ul style="list-style-type: none;">
<li v-for="opcao in opcoes" v-if="opcao.checked">
<div class="checkbox">
<label>
<img border=0 v-bind:src="opcao.imagem"> <big>{{opcao.titulo}}</big>
</label>
</div>
</li>
</ul>
<div class="footer">
<hr/>
</div>
</div>
</body>
</html>
