VueJSPJ

this is my first vue js project

by Amir Danish

HTML

<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="show=!show"> 
      Show/Hide
  </button>
  <p v-if="show">
  I'm part time visible
  </p>
  <p v-if="!show">
  I'm a visible?
  </p>
  <ul>
  <div class ="developers" v-for="developer in data">
   <p>Name: 
   {{developer.name}}
   </p> 
   <p>age: 
  {{ developer.age}}
   </p>
  </div>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
ul {
  color:blue;
  font-weight:bold;
}
.developers {
  border:1px solid #ccc;
  background:lightgray;
  padding:18px;
  font-weight:bold;
  color:blue;
  margin:2%;
}

Vue

new Vue({
  el: "#app",
  data: {
  show:true,
    data: [
      { name: " amir", age: 27 },
      { name: " Vue", age: 2 },
      { name: " Arif", age: 27 },
      { name: " Abid", age: 2 },
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})