vuejs

vuejs数据双向绑定

下面我们来实现数据双向绑定的例子，我们使用vuejs的v-model属性

注意

  • v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
  • vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。

创建vue-2.html并编辑为

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs简单示例</title>
        <!--引入开发版本vue.js，在开发版本中会有很多友好的提示-->
        <script src='./vue.js'></script>
    </head>
    <body>
        <!--定义一个id为demo的div-->
        <div id="demo">
          <!--此处的msg为在vuejs中定义的变量，放在两个花括号中-->
        <h1>Hello {{msg}}</h1>
        <!--此处我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg-->
        <input type="text" v-model="msg">
        </div>
        <script>
            <!--实例化vuejs-->
            new Vue({
            <!--el指定的id为css选择器-->
                el:'#demo',
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验楼-->
                    msg:'实验楼'
                }
            })
    </script>
    </body>
</html>

el表示在html中哪个部分起作用，语法类似jquery的节点选择器，在这里我们看到它选择了一个ID

 

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs简单示例</title>
        <!--引入开发版本vue.js，在开发版本中会有很多友好的提示-->
        <script src='./vue.js'></script>
        <!--下面为cdn引用方式，实验中我们使用下载好的vue.js
        <script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>-->

    </head>
    <body>
        <!--定义一个id为demo的div-->
        <div id="demo">

          <!--此处的msg为在vuejs中定义的变量，放在两个花括号中-->
        <h1>{{msg}}</h1>
        <form  @submit.prevent="additem(newitem)" >
            <div v-for="item in items">
                <label>{{ item.text }}</label> 
            </div>
            <div>
                <input type="text" v-model="newitem.text">
            </div>
            <div>
                <button>添加</button>
            </div>
        </form>
        </div>
        <script>
            <!--实例化vuejs-->
            new Vue({
            <!--el指定的id为css选择器-->
                el:'#demo',
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验楼-->
                    msg:'实验楼第一个vuejs示例',
                    items:[
                        {text:'hello 实验楼'}
                    ],
                    newitem:{text:''}
                },
                methods:{
                    additem(newitem){
                        this.items.push(newitem);
                    }
                }
            })
    </script>
    </body>
</html>

 

 

push()     //在结尾增加一条或多条数据
pop()      //删除最后一条数据
shift()     //删除第一条数据，并返回这条数据
unshift()    //在开始增加一条或多条数据，并返回数组长度
splice()    //向/从数组中添加/删除项目，然后返回被删除的项目。
sort()    //对数组的元素进行排序。
reverse()    //颠倒数组中元素的顺序。

 

posted on 2017-08-24 22:02  michaelchan  阅读(132)  评论(0)  编辑  收藏  举报

导航