vue学习笔记（二）- 数据绑定、列表渲染、条件判断

vue学习笔记（二）- 数据绑定、列表渲染、条件判断

vue的数据绑定和列表渲染的造轮子

GitHub:八至

作者：狐狸家的鱼

 

双向数据绑定

Vue中数据的双向绑定-v-model

数据->页面

页面->数据

适用：input、select、textarea

<div id="app">
        <!-- 数据输入  -->
        <input type="text" v-model="message" >
        <!-- 控制显示状态 -->
        <input type="checkbox" v-model="checked">
        <!-- 显示状态 -->
        <label for="checkbox">{
  {checked}}</label>
        <!-- 页面显示 -->
        <p v-show="checked">{
  {message}}</p>
    </div>

        var message = 'sue';
        var vm = new Vue({
            el:'#app',
            data:{
                message,
                checked:true
            }
        })

这是一个简单的表单输入双向数据绑定，输入框中输入数据，会显示在页面，更改页面显示数据，也会改变输入框中的数据。

单选框控制页面显示状态，true-显示，false-隐藏

当更改输入框中数据时，页面显示也会同时改变

整个操作过程如下：

 

更改页面数据时，输入框的数据也会改变，在控制台改写数据：

操作过程如下：

 列表渲染

列表渲染指令 v-for

语法：1.v-for='item,index in arr'

　　　2.v-for='value,key,index in