Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1　v-model的基础用法

v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源。通过JavaScript在组件的data选项中声明初始值。v-model本质上是一个语法糖。

示例代码如下：

<input v-model="test">

本质上来讲，上面的代码和下面的代码作用一致：

<input :value="test" @input="test = $event.target.value">

其中，@input是对<input>输入事件的监听；：value="test"是将监听事件中的数据放入input。下面是v-model的一个简单例子。

此处需要强调一点，v-model不仅可以给input赋值，还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。

可以在如下div中加入<p>{{test}}</p>来获取input数据，然后修改input中数据，会发现<p></p>中数据随之改变。

我们看下面的示例。在data代码块中定义一个变量test，然后在input组件中使用v-model="test"来实现双向绑定，完整示例代码如下：

<div id="app">
    <input v-model="test">
    <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            test: '这是一个测试'
        }
    });
</script>

3.1.1　在input中使用

在input输入框中，我们可以使用v-model指令来实现双向数据绑定。

我们接下来做一个示例：当改变input的内容时，显示内容同步改变。具体步骤如下：

1）在Vue.js的data区域定义一个变量message，同时给它一个初始值。

2）通过{{…}}语法，将变量message的值显示在页面。

3）使用v-model="message"，将input标签双向绑定值到变量message。

4）尝试改变input标签里面的值，变量message的值也会同步改变。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（input）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--input输入框的内容改变的时候，这里的内容也改变-->
        <p>{{ message }}</p>
        <!--input双向绑定到属性message-->
        <input v-model="message">
    </div>
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            message: 'Vue教程'
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-1和图3-2所示。

图3-1　input页面初始化显示内容

图3-2　改变input输入框的内容，显示内容同步改变

3.1.2　在textarea中使用

在textarea输入框中，我们可以使用v-model指令来实现双向数据绑定。

我们接下来做一个示例：在改变textarea的内容时，显示内容同步改变。具体步骤如下：

1）在Vue.js的data区域定义一个变量message，同时给它一个初始值。

2）通过{{…}}语法，将变量message的值显示在页面。

3）使用v-model="message"，将textarea标签双向绑定值到变量message。

4）尝试改变textarea标签里面的值，变量message的值也会同步改变。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（textarea）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--input输入框的内容改变的时候，这里的内容也改变-->
        <p>{{ message }}</p>
        <!--textarea双向绑定到属性message-->
        <textarea  v-model="message"></textarea>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            message: 'Vue教程'
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-3和图3-4所示。

图3-3　textarea页面初始化显示内容

图3-4　改变textarea输入框的内容，显示的内容同步改变

3.1.3　在select中使用

在select输入框中，我们可以使用v-model指令来实现双向数据绑定。

在select中实现双向数据绑定时，有个核心知识点要注意，select中默认选项是v-model绑定的值。

我们接下来做一个示例：当改变select下拉选项时，显示内容同步改变。具体步骤如下：

1）在Vue.js的data区域定义一个变量xuanzhong，同时给它一个初始值。

2）通过{{…}}语法，将变量xuanzhong的值显示在页面。

3）使用v-model="message"，将select标签双向绑定值到变量xuanzhong。

4）尝试改变select下拉选项，变量xuanzhong的值也会同步改变。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（select）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--select双向绑定到属性xuanzhong，默认会选中该属性值对应的项目-->
        <select v-model="xuanzhong" name="shuiguo">
            <option value="0">请选择</option>
            <option value="p">苹果</option>
            <option value="x">香蕉</option>
            <option value="l">荔枝</option>
        </select>
        <!--上面select选项改变的时候，下面的xuanzhong显示的内容也会改变-->
        <span>默认: {{ xuanzhong }}</span>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            xuanzhong:"x"
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-5～图3-7所示。

图3-5　select页面初始化，默认显示x

图3-6　select默认显示的下拉选项

图3-7　改变select的下拉选项，显示的值同步改变

3.1.4　在checkbox（单选）中使用

在checkbox输入框中，我们可以使用v-model指令来实现双向数据绑定。

在checkbox中实现双向数据绑定时，有个核心知识点要注意，checkbox中默认选项是v-model绑定的值。

我们接下来做一个示例：当改变checkbox选中选项时，显示内容同步改变。具体步骤如下：

1）在Vue.js的data区域定义一个变量xuanzhong，同时给它一个初始值。

2）通过{{…}}语法，将变量xuanzhong的值显示在页面。

3）使用v-model="message"，将checkbox标签双向绑定值到变量xuanzhong。

4）尝试改变checkbox选中状态，变量xuanzhong的值也会同步改变。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（checkbox单选）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
    <!--input双向绑定到属性xuanzhong，默认该值为true，则下面的input处于选中状态-->
    <input type="checkbox" v-model="xuanzhong" id="c1">
    <!--label中for属性的值和上面input中id的值一致来实现两者点击的绑定-->
    <!--input选中状态改变的时候，下面显示的内容也会改变-->
    <label for="c1">{{xuanzhong}}</label>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            xuanzhong: true, //定义默认值为true
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
         }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-8和图3-9所示。

图3-8　checkbox（单选）页面初始化，默认选中true

图3-9　改变checkbox（单选）选中状态，显示的值同步改变

3.1.5　在checkbox（多选）中使用

checkbox多选和单选的原理一致，区别在于checkbox单选项的值为true和false，多选项的值为数组。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（checkbox单选）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--input双向绑定到属性xuanzhong，默认该值为“天津”，
        则下面对应的选中处于选中状态-->
        <input type="checkbox" v-model="xuanzhong" value="天津">天津
        <input type="checkbox" v-model="xuanzhong" value="北京">北京
        <input type="checkbox" v-model="xuanzhong" value="上海">上海
        <!--input选中状态改变的时候，下面显示的内容也会改变-->
        <br><label for="">{{xuanzhong}}</label>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
         el: '#app',//app为前面div代码块的id的值，通过“#”绑定
         //data区域定义属性的值
         data: {
             xuanzhong:["天津"] //选中项为数组
             //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
         }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-10和图3-11所示。

图3-10　checkbox（单选）页面初始化，默认选中“天津”

图3-11　改变checkbox（多选）多选项，显示的值同步改变

3.1.6　在radio（单选）中使用

我们接下来做一个示例：当改变radio选中状态时，显示内容同步改变。具体步骤如下：

1）在Vue.js的data区域定义一个变量moren，同时给它一个初始值。

2）通过{{…}}语法，将变量moren的值显示在页面。

3）使用v-model="moren"，将radio标签双向绑定值到变量message。

4）尝试改变radio选项的状态，变量moren的值也会同步改变。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（radio单选）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为“app”，后面Vue会使用该值-->
    <div id="app">
        <!--input双向绑定到属性moren，默认该值为“男”，则下面对应的选项处于选中状态-->
        <input type="radio" v-model="moren" value="男"> 男
        <input type="radio" v-model="moren" value="女"> 女
        <!--input选中状态改变的时候，下面显示的内容也会改变-->
        <br>性别：<span>{{moren}}</span>
    </div>
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
       //data区域定义属性的值
        data: {
        moren: "男" //定义默认值
        //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”    
        }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-12和图3-13所示。

图3-12　radio页面初始化，默认选中“男”

图3-13　改变radio页面选项，显示的值同步改变

3.1.7　在链接a中应用

网页中的链接a标签有两个常用的属性：href和target，我们可以通过v-bind：指令将对应的属性绑定到Vue.js中data属性的值。

我们接下来做一个示例：在Vue.js中a标签使用v-bind：指令。具体步骤如下：

1）在Vue.js的data区域定义变量wangzhi（网址）和变量target（打开新窗口）。

2）在a标签中，使用v-bind：href="wangzhi"绑定网址，使用v-bind：target="target"绑定新窗口打开属性。完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（链接a应用）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--打开一个到淘宝的页面，网址通过参数的形式传递-->
        <a v-bind:href="wangzhi" v-bind:target="target">黄老师站点</a><br>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            wangzhi: 'http://www.8895.org',//定义网址
            //后面还有数据，则这里定义完毕后面需要跟上逗号“，”
            target:'_blank'    //链接在新窗口打开      
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    </script>
  
</body>
</html>

效果如图3-14所示。

图3-14　a标签页面初始化效果图

3.1.8　在图片中使用

网页中图片标签img常用的属性是srct，我们可以通过v-bind：指令将对应的属性绑定到Vue.js中data属性的值。

我们接下来做一个实例：在Vue.js中img标签使用v-bind：指令。具体步骤如下：

1）在Vue.js的data区域定义变量tupiandizhi（图片地址）。

2）在img标签，使用v-bind：src="tupiandizhi"绑定图片地址。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双向数据绑定v-model指令（图片img）</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--加载一个图片，图片的地址通过参数传递-->
        <img v-bind:src="tupiandizhi" width="50"></img><br>
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            tupiandizhi:'img/v.png'//定义图片地址
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    </script>    
</body>
</html>

效果如图3-15所示。

图3-15　img标签页面初始化效果图

上一章目录下一章