lec4

by ElhamZ

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="password" placeholder="Enter your name" v-model="password">
  <p v-if="password.length>8">Awesome! Your password is longer than 8 characters.</p>
  <p v-else-if="password.length>0">Please enter a longer password.</p>
  <p v-else>Please enter a password.</p>
  <ol>
    <li v-for="category in categories">
      {{category.name}}
      <ul>
        <li v-for="sub in category.sub">{{sub}}</li>
      </ul>
    </li>
  </ol>


</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    password: ' ',
    categories: [{
        name: 'JavaScript',
        sub: ['Vue.js', 'React', 'Angular2']
      },
      {
        name: 'Databases',
        sub: ['MySQL',
          'PostgreSQL',
          'MariaDB'
        ]
      },
      {
        name: 'Operating Systems',
        sub: ['macOS', 'Linux', 'Windows']
      },
    ]
  }
})