Asp.net MVC + Vue.js

@{
    Layout = null;
}

名前
性別

年齢
趣味


追加
table border="1"cellspacing="5"cellpadding="5"v-show="stuList.length">

学生リスト

状態
学号
氏名
性別
年齢
趣味
操作
操作
tr v-for=「(item,index)in stuList」:class=「{bg:item.isChecked}」>

{item.name}}
　　　　　　　　　　{{item.gender}}
　　　　　　　　　　{{item.age}}
　　　　　　　　　　{{item.hobby}}
　　　　　　　　　　削除
tr>

div>
cript><br> var list=[<br>{<br>name:[張三],<br>gender:[男],<br>age:[12],<br>hobby:[寝る],<br>isChecked:false<br>;,<br>{<br>name:「張三」,<br> gender:「男」、<br> 　　　　　　　　age:"12",<br> hobby:「寝る」、<br> 　　　　　　　　isChecked:false<br> 　　　　　　}<br> 　　　　　];</p>
<p> 　　　　var vm=new Vue({<br> 　　　　　　　　el:"#demo",<br> 　　　　　　　　data:{<br> 　　　　　　　　　　stuList:list,<br> 　　　　　　　　　　name:"",<br> 　　　　　　　　　　gender:"",<br> 　　　　　　　　　　age:"",<br> 　　　　　　　　　　hobby:"",<br> 　　　　　　　　　　isChecked:""<br> 　　　　　　　　},<br> 　　　　　　　　methods:{<br> 　　　　　　　　　　AddStuList:function(){<br> 　　　　　　　　　　　　var stu={<br> 　　　　　　　　　　　　　　　　name:this.name,<br> 　　　　　　　　　　　　　　　　gender:this.gender,<br> 　　　　　　　　　　　　　　　　age:this.age,<br> 　　　　　　　　　　　　　　　　hobby:this.hobby,<br> 　　　　　　　　　　　　　　　　isChecked:this.isChecked<br> 　　　　　　　　　　　　　　}<br> 　　　　　　　　　　　　this.stuList.push(stu);<br> 　　　　　　　　　　　　this.name='';<br> 　　　　　　　　　　　　this.gender='';<br> 　　　　　　　　　　　　this.age='';<br> 　　　　　　　　　　　　this.hobby='';<br> 　　　　　　　　　　　　isChecked='';<br> 　　　　　　　　　　},<br> 　　　　　　　　　delStuList:function(item){<br> 　　　　　　　　　　　　var index=this.stuList.indexOf(item);<br> 　　　　　　　　　　　　this.stuList.splice(index)<br> 　　　　　　　　　　}<br> 　　　　　　　　}<br> 　　　　　　});<br> 　　　　

転載先:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790124.html