v-for与 v-model指令

    <!--HTML结构-->
    <div id="app">
      <ul>
        <li v-for="(item,index) in list">
          <span>下标 : {{index}}</span>
          <span>元素 : {{item}}</span>
          </li>
        </ul>
     </div>
     
        <script>
        /*
            1. v-for 作用 : 根据数组长度 重复渲染数据
            2. v-for 语法(列表渲染)
               v-for="item in 数组名"
            3. v-for注意点:
               v-for写在哪个标签上面,就会重复生成哪个标签
            */
            /*创建vue实例*/
            let app = new Vue({
            //el:挂载点
            el:'#app',
            //data:要渲染的数据
            data:{
           list:[
           "小强",
           "小红",
           "小白",
           "小张",
           "小红帽"
           ]
            }

            })
       </script>
       

小结:

v-for指令的作用

列表渲染: 根据数组元素 重复渲染元素

v-for指令使用时的注意点

写在谁上面,就生成多个谁

v-model指令数据双向绑定

<div id="app">
    <input type="text" v-model="msg">
    <p>输入框内容: {{ msg }}</p>
    </div>
    <script>
    /*
        1. v-model 作用 : 双向绑定
             v-model='值'
        2.双向绑定 :
            2.1 修改表单的值.  data中的数据会自动变化
            2.2 修改data中的数据.  表单的值也会改变
        3.v-model注意点:
           a.只能用于表单元素
           b.v-model绑定的数据一定要在data中声明
        */
        /*创建vue实例*/
        let app = new Vue({
        //el:挂载点
        el:'#app',
        //data:要渲染的数据
        data:{
        msg:'我是冠希哥'
        }

        })
   </script>
   
   

1.当表单的值发生变化,data数据也会变化

2.修改data的数据,表单值也会变化

双向数据绑定的意义

    <div id="app">
        用户: <input type="text" placeholder="请输入用户名" v-model="username">
        <br>
        密码: <input type="text" placeholder="请输入密码名" v-model="password">
        <br>
        <button @click="doLogin">登录</button>
    </div>

    <script>
    /*
        1. v-model 作用 : 双向绑定
             v-model='值'
        2.双向绑定 :
            2.1 修改表单的值.  data中的数据会自动变化
            2.2 修改data中的数据.  表单的值也会改变
        3.v-model注意点:
           a.只能用于表单元素
           b.v-model绑定的数据一定要在data中声明
        4.v-model双向绑定的意义 :  可以快速 获取/设置  表单的值
        */
        /*创建vue实例*/
        let app = new Vue({
            //el:挂载点
            el:'#app',
            //data:要渲染的数据
            data:{
            msg:'我是冠希哥'
            }
        })
   </script>