【Vue】指令之列表循环、表单元素绑定

列表循环、表单元素绑定

v-for指令

作用：根据数据生成列表结构

• 数组经常和v-for结合使用
• 数组长度的更新会同步到页面上面，是响应式的

语法：(item,index) in 数据，其中item代表每一项，index代表索引

<div id="app">
    <ul>
      <li v-for="(item,index) in arr" :title="item">
        {{index}}:{{item}}
      li>
      <li v-for="(item,index) in objArr">
        {{item.name}}
      li>
    ul>
  div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
  var app = new Vue({
    el:"#app",
    data:{
      arr:[1,2,3,4,5],
      objArr:[
        {name:"Jack"},
        {name:"Rose"}
      ]
    }
  })
script>

v-model指令

作用：获取或设置表单元素的值（绑定的数据和表单元素的值双向数据绑定）
语法：

 <div id="app">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{message}}h2>
  div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "hello"
      },
      methods: {
        getM: function () {
          alert(this.message);
        }
      },
    })
  script>

效果: