Vue学习笔记4-vue指令for/model /案例：小黑记事本

vue指令

• v-for
  根据数据生成列表结构，数组经常和 v-for 结合使用
  语法：v-for="item in arr" arr 是数组名（自定义的），in 是关键字，不可更改，item 是遍历的每一项，可以更改
  item 和 index 可以结合其他指令一起使用
  数组长度的更新会同步到页面上，是响应式的

 <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="删除数据" @click="remove">
        <ul>
            <li v-for="item in arr" :title="item">
                yangdandan:{
   {
   item+1}}
                <!-- ‘yangdandan’遍历四次，并分别在后面加上arr数组里面的内容 -->
            </li>
            <li v-for="(item,index) in arr" :title="item">
                {
   {
   index}}yangdandan:{
   {
   item}}
                <!-- 遍历出arr数组里面的内容，并在前面加上索引号 -->
            </li>
        </ul>
        <h2 v-for="(item,index) in objArr" v-bind:title="item.name">
            {
   {
   index+1}} ： {
   {
   item.name}}
            <!-- 遍历出 obj对象中的name属性值 -->
        </h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
   
            el: "#app",
            data: {
   
                arr: ["北京", "上海", "广州", "深圳"],
                objArr: [