vue v-for 綁定數據

時間 2020-10-26

標籤 javascript html vue java app this spa code htm blog 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
 <meta charset="utf-8">
<head>
    <title></title>
</head>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
    <input type="button" name="" value='添加' v-on:click='add'>
    <p v-for="(val,i) in list" :key='val.id'>
        <input type="checkbox" name=""> {{val.id}}--------{{val.name}} </p>
</div>
<script type="text/javascript">
  var vm = new Vue({ el:'#app', data:{ list:[ {id:1,name:'cheng'}, {id:2,name:'feng'}, {id:3,name:'chi'}, ] }, methods:{ add:function(){ this.list.unshift({id:4,name:'wang'}) } } }) </script>
</body>
</html>