forth commit fro desktop

Author: Tatmius

.index.html.un~

@@ -41,11 +41,12 @@ <h2>data binding</h2>
 	    </ul>
 
 	    <input v-model="name">
-	    <button v-on:click="doAdd">Add monster</button>
+		<button v-on:click="doAdd">Add monster</button>
 	    <ul>
-		    <li v-for="item in list" v-bind:key="item.id">
-			    ID.{{item.id}}{{item.name}} HP.{{item.hp}}
-		    </li>
+		    <li v-for="item in list1" v-bind:key="item.id">
+			    ID.{{item.id}} {{item.name}} HP.{{item.hp}}
+				<buttom v-on:click="doRemove(index)">delete monster</buttom>
+			</li>
 	   </ul>
 
         </div>

.main.js.un~

@@ -31,10 +31,14 @@
 	    <p v-bind:class="classObject">Text</p>
 	    <p v-bind:style="styleObject">Text</p>
 
-	    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
-	    	<circle cx="100" cy="75" v-bind:r="radius" fill="lightpink/">
-	    </svg>
-	    <input type="range" min="0" max="100" v-model="radius">
+	    <div v-if="ok">v-if conditional branching</div>
+	    <div v-show="ok">v-show conditional branching</div>
+	    <ul>
+	    	<li v-for="item in list1" v-bind:key="item.id" v-bind:class="{tuyoi:item.hp>300}">
+		ID.{{item.id}} {{item.name}} HP.{{item.hp}}
+		<span v-if="item.hp>300">strong!</span>
+		</li>
+	    </ul>
 
 	    <input v-model="name">
 	    <button v-on:click="doAdd">Add monster</button>

index.html

@@ -19,6 +19,13 @@ var app = new Vue({
 			backgroundColor: 'lightgray',	
 		},
 		radius:50,
+		ok: true,
+		name:"kimaira",
+		list1:[
+			{id:1, name:'slime', hp:100},
+			{id:2, name:'goblin',hp:200},
+			{id:3, name:'dragon',hp:500},
+		],
     	},
 	methods:{
 		handleClick:function(event){
@@ -27,6 +34,17 @@ var app = new Vue({
 		increment: function(){
 			this.count+=1
 		},
+		doAdd:function(){
+			var max=this.list.reduce(function(a,b){
+				return a>b.id ? a:b.id
+			
+			},0)
+			this.list.push({
+				id:max+1,
+				name:this.name,
+				hp:500,
+			})
+		},
 	},
 	mounted:function(){
 		this.scroll=100