We will display below object using Vue js
links: [ { name:'facebook', href:'http://facebook.com' }, { name:'google', href:'http://google.com' }, { name:'yahoo', href:'http://yahoo.com' } ]
We have some link name and url. We will display it in a list.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container" id="el"> <p>{{name}}</p> <ul> <li v-for='link in links'> <a :href='link.href'> {{ link.name }} </a> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vue = new Vue({ el:'#el', data: { name:'Top Nav', links: [ { name:'facebook', href:'http://facebook.com' }, { name:'google', href:'http://google.com' }, { name:'yahoo', href:'http://yahoo.com' } ] } }); </script> </body> </html>
Output :