Vuejs基础与应用开发实战（微课版） 单元3教案

《Vue.Js基础与应用开发实战（微课版）》配

套教学教案

单元3

课时内容小数据绑定与样式绑授课时间课时6

•掌握Vue表单控件的数据绑定

•掌握绑定value的方法

•熟悉修饰符

•掌握class绑定

教学目标

•掌握style绑定

•掌握定义与使用过滤器的方法

•能编写程序代码实现英寸与毫米之间的单位换算、实现图片自动播放与单击

播放功能、实现图片自动缩放与图片播放功能

教学重点Vue表单控件的数据绑定、绑定value、class绑定、style绑定

教学难点定义与使用过滤器

1.教学思路：先介绍Vue表单控件的数据绑定和绑定value的方法，再介绍class绑定、

教学设计style绑定。

2.教学手段：多媒体展示+软件操作。

教学内容

3.1Vue表单控件的数据绑定

可以用v-model指令在表单控件元素上创建双向数据绑定，v-model会根据控件类型自动选取正确的方法

来更新元素。

3.1.1输入框的数据绢定

输入框主要包括单行输入控件input和多行输入控件textareao

【实例3-1］使用v-model指令实现input和textarea控件的双向数据绑定

【操作要求】

创建网页0301.html,使用v-model指令实现input和textacea控件的双向数据绑定，在页面中输出input

和textarea控件中输入的数据，并与输入框中的数据同步变化。在Chrome浏览器中浏览网页0301.html的初

始结果，如图所示。

input控件的数据绑定：

sw

用户名：吉琳

textarea控件的数据绑定：

后吴的志JS赤幼在国里集合？

几点集自？

留名内容：今天的忠要活动在哪里集台？

几点集合?___________________________

tChrome浏览朋中浏览网页0301.html的初始结果

【实现过程】

使用HTML编辑器Dreamweaver创建网页0301.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

<p>input控件的数据绑定：</p>

<inputtype="text"v-model="inputName"placeholder”请输入用户名...">

<p>用户名：{{inputName}}</p>

<p>textarea控件的数据绑定：</p>

<textareacol3="25"row3="5"placeholder"请留言..."

v-model="infoTexf></textarea>

<pstyle="white-space:pre-line"〉留言内容:{{infoText}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

inputName:'吉琳'，

infoText:'今天的志愿活动在哪里集合？\r\n几点集合？,

)

))

</script>

浏览网页0301.html时，在页面的输入框中删除默认的数据或输入新的数据，页面中的输出内容也

会同步变化。打开Chrome浏览器的控制台界面，在控制台界面的提示符〉后分别输入以下代码：

vm.inputName='李斯'〃然后按［Enter］键

Text='志愿活动成功开展〃然后按【Enter】键

可以发现，输入框中的数据和页面中的输出内容同步发生了变叱,如图所示。

input控件的数据绑定：

I李斯I

用户名：李斯

textarea控件的数据绑定:

志良运动成功开屣

留言内容：志愿活动成功开展

通过浏览器控制台界面更新数据后，输入框中的数据和页面中的输出内容同步变化

实际上，v-model是:value和@1%比事件的语法糖。

【示例】demo030101.html

<divid="app">

<inputtype="text":value="inputName"placeholder”请输入用户名..."

@input="inputName=Sevent.target.value">

<p>用户名：{{inputName}}</p>

</div>

<script>

varvm=newVue（{

el:"#app",

data:{

inputName:"

）

}）

</script>

3.1.2复选框的数据绑定

对于单个复选框，可以绑定一个逻辑值；对于多个复选框，可以绑定到同一个数组。

【实例3-2］使用v-model指令实现复选框的双向数据绑定

【操作要求】

创建网页0302.html,使用v-model指令实现checkbox控件的双向数据绑定。浏览网页0302.html时，

勾选复选框的效果如图所示。

货到付款/true

请谈认你需要赎买的图书：

QHTML5+CSS3移动We历发实战□等基础学Python（全彩版）口数学之美

需要购买图书为「HTML5+CSS3移动Web开发实战•「零基础学Python（全彩版）」

浏览网页0302.html时勾选复选框的效果

在浏览器的控制台界面中，通过赋值的方式也可以改变复选框勾选状态。例如vm.checked=false，对应的

复选框会取消勾选。

列表中有多个选项可供选择，在列表项中选择“湖南”选项的效果如图所示。

I收即蜒：

【湖至5

I选择的省为:湖南I

在列表项中选择“湖南”选项的效果

【实现过程】

使用HTML编辑器Dreamweaver创建网页0304.html,在该网页中编写以下代码实现要求的功能：

<divid=Happ">

<p>收货地址：</p>

<selectv-model="selected"name="province">

<optionvalue="">请选择省〈/option〉

<optionvalue="湖南">海南〈/option〉

<optionvalue="湖北">海北〈/option〉

<optionvalue="江西”>江西〈/option〉

<optionvalue="0JII">R5J11</option>

</select>

<p>选择的省为：{{selected}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

selected:"

}

))

</script>

2.使用v-model指令实现多选列表的数据绑定

【实例3-5]使用v-model指令实现多选列表的双向数据绑定

【操作要求】

创建网页0305.html,使用v-model指令实现多选列表的双向数据绑定。浏览网页0305.ht川时，在

下拉列表中有多个选项供选择，在列表项中选择“湖南”与“江西”两个选项的效果如图所示。

收货地址:

选择的省为:[■湖南•「江西」

在列表项中选择“湖南”和“江西"两个选项的效果

【实现过程】

使用HTML编辑器Dreamweaver创建网页0305.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

<p>收货地址：</p>

<selectv-model="selected"name="province"multiple>

<optionvalue=""：^选择省〈/option〉

<optionvalue="湖南"〉海南〈/option〉

<optionvalue="湖5匕"〉湖d匕〈/option〉

<optionvalue="江西”>江西〈/option〉

<optionvalue="HJ11">EJ11</option>

<optionvalue="贵州，贵州〈/option〉

</select>

<p>选择的省为：{{selected}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

selected:0

})

</script>

3.使用v-model结合v-for指令渲染动态选项

【实例3-6］使用v-model结合v-for指令选择用户等级

【操作要求】

创建网页0306.html,使用v-model结合v-for指令选择用户等级。在浏览器中浏览该网页时，用户等级的

初始选择状态如图所示。

设置用户等级:

上级用户5

用户等级为:A

用户等级的初始选择状态

在列表中选择“二级用户”选项时，对应的用户等级显示为“B”；在列表中选择“三级用户”选项时，对应的用

户等级显示为“C”。

3.2绑定value

对于单选按钮、选择列表选项，v-model绑定的value通常是静态字符串；对于复选框，如果只有一个复

选框，v-model绑定的是一个逻辑值。如果有多个复选框，v-mode绑定的是一个数组。

例如:

<»-当选中时，picked为字符串"货到付款"一>

<inputtype="radioMv-model="picked"value="货到付款"〉

<!--toggle为true或false->

<inputtype="checkbox"v-model="toggle”>

<!-当选中时,selected为字符串“湖南”一>

<selectv-model=",selected">

<optionvalue="湖南">湖南</cption>

</select>

如果要绑定value到Vue实例的一个动态属性上，就可以用“bind实现，并且这个属性的值可以不是字

符串。

3.2.1复选框绑定value

【实例3-7］使用v-model实现复选框绑定value

【操作要求】

创建网页0307.html,使用v-model实现复选框绑定value。浏览网页0307.html的初始状态及复选框的

勾选与取消勾选状态如图3-9所示。

货到付款口||货到付款C3trug|货到付款Ofal一

浏览网页0307.html时的初始状态复选框的勾选与取消勾选状态

【实现过程】

使用HTML编辑器Dreamweaver创建网页0307.html,在该网页中编写以下代码突现要求的功能：

<divid="app">

〈labelfor="checkbox1">货到付款〈/label〉

<inputtype="checkbox"id="checkbox1"v-model="toggle"

:true-value=T:false-value="f'>

<span>{{toggle}}</span>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

toggle:",

t:true,

f:false

)

})

</script>

3.2.2单选按钮绑定value

【实例3-8】使用v-model实现单选按钮绑定value

【操作要求】

创建网页0308.html,使用v-model实现单选按钮绑定value。浏览网页0308.html,如图所示。

货到付款。货到付款⑥true

浏览网页0308.html时的初始状态单选按钮的选中状态

【实现过程】

使用HTML编辑器Dreamweaver创建网页0308.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

〈labelfor="radio1">货到付款〈/label〉

<inputtype="radio"id="radiorv-model="pick":value="t">

<span>{{pick}}</span>

</div>

<script>

varvm=newVue({

el:"#app".

data:{

pick:",

t:true

)

})

</script>

3.2.3选择列表绑定value

【实例3-9］使用v-model实现选择列表绑定value

【操作要求】

创建网页0309.html,使用v-model实现选择列表绑定value。浏览网页0309.html时，在下拉列表中有多

个选项可供选择，在列表项中选择“湖南’选项的效果如图所示。

|收押&此

电5

|选择的笆为:湖南|

在列表项中选择“湖南”选项的效果

【实现过程】

使用HTML编辑器Dreamweaver创建网页0309.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

<p>收货地址：</p>

<selectv-model="selected"name="province">

<option:value="{site:"}，>请选择省〈/option〉

<option:value="{site:‘海南'}">湖南(/option〉

<option:value="{site:'港1匕'}”>湖1匕〈/option)

<option:value="{site:‘江西'}”>江西〈/option〉

</select>

<p>选择的省为：{{selected.site}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

selected:"

)

})

</script>

3.3修饰符

3.3.1.lazy修饰符

默认情况下，v-model会在input事件中同步输入框的数据。如果需要转变为在change事件中同步输入

框的数据，可以添加一个修饰符.lazy。

例如：

<!-在change而不是input事件中更新->

<inputv-model.Iazy="msg">

vp>文本内容：{{msg}}</p>

光标移出输入框后，<p></p>之间的“文本内容'才会发生变化，与输入框同步数据。

【实例3-10］在v-model指令中使用修饰符.lazy

【操作要求】

创建网页0310.html,在v-model指令中使用修饰符.lazy,实现v-model在change事件中同步输入框的

数据。浏览网页0310.html时，先在输入框中输入数据，等到光标移出输入框后，输入框外的“用户名”才会发

生变化，与输入框同步数据。

【实现过程】

使用HTML编辑器Dreamweaver创建网页0310.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

<p>input控件操作：</p>

<inputtype=,'text"v-model.lazy="inputNameMplaceholder”请输入用户名...">

vp>用户名：{{inputName}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

inputName:"

)

})

</script>

3.3.2.number修饰符

如果想自动将用户的输入值转为Number类型(如果原值的转次结果为NaN,则返回原值)，可以添加一

个修饰符.number给v-model来处理输入值，例如：

<inputv-model.number-'age"type=,'number">

这通常很实用，因为在typeT'number”时，HTML中输入的值也总是会返回字符串类型。

3.3.3.trim修饰符

如果需要自动过滤用户输入的首尾空格，可以添加.trim修饰符到v-model上过滤输入，例如：

<inputv-model.trim="inputName">

【示例】demo030302.html

代码如下：

<divid="app">

<inputtype="text"v-model.trin="inputName"placeholder”请输入用户名...">

<p>用户名：{{inputName}}</p>

</div>

<script>

varvm=newVue({

el:"#app",

data:{

inputName:"

)

})

</script>

3.4class绑定

数据绑定的一个常见需求是操作元素的class列表和它的内联样式，因为它们都是HTML元素的属性，可以

用v-bind来设置样式属性：只需要计算出表达式最终的字符串。不过，字符串拼接操作麻烦又易错。因此在v-

bind用于class和style时，Vue专门增强了v-bind,表达式的结果类型除了字符串之外，还可以是对象或数组。

class绑定包括对象绑定classx数组绑定class和组件绑定class。

3.4.1对象绑定class

1.为v-bind:class绑定一个对象

可以为v-bind:class绑定一个对象，从而动态地切换class,例如：

<divv-bind:class="{active:isActive}"></div>

这里的classactive的更新将取决于数据属性isActive的值是否为trueo

【实例3・11］使用v-bind指令实现简单class绑定

【操作要求】

创建网页0311.html,使用v-bind指令实现简单class绑定，从而动态地切换class,输出的文本内容是否

应用指定的样式stylel,取决于数据属性isActive的值是否为true。

【实现过程】

使用HTML编辑器Dreamweaver创建网页0311.html,在该网页中编写以下代码实现要求的功能：

<divid="app">

<divv-bind:class="{'style1':isActive}">

{{info}}

</div>

</div>

<script>

varvm=newVue({

el:'#app',

data:{

info:'请登录'，

isActive:true

}

!)

</script>

其中类stylel的属性设置如下：

<style>

.stylel{

font-size:24px;

font-weight:bold;

color:purple;

}

</style>

2.在对象中传入多个属性

可以在对象中传入多个属性来动态切换多个class,v-bind:class指令可以与普通的class属性共存。

【实例3-12］使用v-bind:class指令与普通class属性共同设置样式

【操作要求】

创建网页0312.html,使用v-bind:class指令与普通class属性共同灵活设置样式，实现在对象中传入多个

属性来动态切换多个class.

3.为v-bind:class直接绑定data数据里的一个对象

也可以为v-bind:class直接绑定data数据里的一个对象。

【实例3-13］为v・bind:class绑定返回对象的计算属性

【操作要求】

创建网页0313.html,为v-bind:class绑定返回对象classObject的计算属性，对象classObject包括3个

数据的返回值，分另(I为base:true、active:this.isActive&&!this.error.valuex'text-danger':this.error.value&&

this.error.type==='fataI'0

【实现过程】

使用HTML编辑器Dreamweaver创建网页0313.html,在该网页中编写以下代码实现要求的功能：

<divid="main">

<divv-bind:class="classObject">

{{info}}

</div>

</div>

<script>

varvm=newVue({

el:'#main',

data:{

info:，请登录'，

isActive:true,

error:{

value:false,

lype.'fatal'

)

).

computed:{

classObject:fcnction(){

return{

bass:true,

active:this.isActive&&Ithis.error.value,

'text-danger':this.error.value&&this.error.type==='fatal'

}

)

)

})

</script>

上述代码中，this.isActive的值为true,!this.error.value的值为true所以active的值为truethis.error.value

的值为false,this.error.type的值为fatal,即this.error.type==='fatal'的值为true,所以'text-dangar'的值为

falseo最终网页中的文本内容的样式由base和active共同起作用c

3.4.2数组绑定class

可以把一个数组传给v-bind:class,以应用一个class列表。

如果要根据条件切换列表中的class,可以用三元表达式，例如：

<divid="app":class="[isActive?activeClass:",errorClass]"></div>

此例始终添加errorClass，但是只有在isActive的值是true时才添加activeClass©

不过，当有多个条件class时这样写有些烦琐，可以在数组中使用对象绑定，例如：

<divid="app":class="({active:isActive},errorClass]"></div>

3.4.3组件绑定class

在一个定制组件上用到class属性时，这些类将被添加到根元烫上面，这个元素上已经存在的类不会被覆

盖。

【示例】demo030403.html

代码如下：

<divid="app"class=,'test">

<my-componentclass-'stylelstyle2"></my-component>

</div>

<script>

Vponent('my-component',{

template:'<pclass=Mstyle3style4”>欢迎登录</p>'

})

varapp=newVue({

el:'#app'

})

</script>

HTML最终将被渲染为：

<divid="app"class="test">

<pclass="style3style4style1style2”>欢迎登录</p>

</div>

该方法同样也适用于绑定HTMLclasso

例如:

<divid="app"class="test">

<my-componcnt:class="{active:isActivc}"></my-componcnt>

</div>

<script>

Vponent('my-component'.{

template:'<pclass="style3style4”>欢迎登录</p>'

})

varapp=newVue({

el:'#app',

data:{

isActive:true

}

})

</script>

HTML最终将被渲染为：

<divid="app"class="test">

<pclass="style3style4active”>欢迎登录</p>

</div>

3.5style绑定

3.5.1使用v・bind:style直接设置样式

v-bind:style十分直观，看起来很像CSS,其实它是一个JavaScript对象。CSS属性名可以用驼峰

(camelCase)命名法或者短横线连接(kebab-case)命名法。

【实例3-14］使用v-bind:style直接设置文本内容的样式

【操作要求】

创建网页0314.html,使用v~bind:style直接设置文本内容的颜色为blue,文字大小为24pxo

【实现过程】

使用HTML编辑器Dreamweaver创建网页0314.html,在该网页中编写以下代码实现要求的功能：

<divid="app":style="{color:actveColor,fontSize:size+'px'}">欢迎登录

</div>

<script>

varvm=newVue({

el:'#app',

data:{

activeColor:'blue',

size:24

)

))

</script>

HTML将被渲染为：

<divid='*app":style="{color:t>lue;fontSlze:24px;}”>欢迎登录

3.5.2使用v-bind:style绑定样式对象

使用v-bind:style直接绑定到一个样式对象会更好，能够让模板更清晰。

【示例】demo030501.html

代码如下：

<divid="app":style="objStyle”>欢迎登录</div>

<script>

varvm=newVue({

el:'#app',

data:{

objStyle:{

color:'blue',

fontSize:'24px,

}

)

})

</script>

3.5.3使用v-bind:style绑定样式数组

使用v-bind:style绑定样式数组，可以方便实现将多个样式对象应用到同一个元素上。

当v-bind:style使用需要特定前缀的CSS属性时，例如transform,Vue会自动侦测并添加相应的前缀。

可以为style绑定中的属性提供一个包含多个值的数组，该数组常用于提供多个带前缀的值。

例如:

<div:style="{display:['-webkit-box'.'-ms-flexbox'.'flex'])">

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的flexbox,

那么渲染结果会是display:flex。

3.6定义与使用过滤器

Vue允许自定义过滤器，它可被用于一些常见的文本格式化。过滤器可以用在两个地方：模板插值和v-

bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符指示。

例如:

{{message|capitalize}}

<divv-bind:id="rawld|formatld"></div>

过滤器设计的目的是用于文本转换。如果要在其他指令中实现更复杂的数据变换，应该使用计算属性。

3.6.1过滤器的两种注册形式

应用filters选项定义的过滤器包括过滤器名称和过滤器函数两部分。过滤器有以下两种注册形式。

(1)使用Vue.fmer()方法注册

例如:

//注册

Vue.filterfmy-filter',function(value){

//返回处理后的值

})

“getter,返回已注册的过滤器

varmyFilter=Vue.filterCmy-filter')

(2)在Vue构造函数或组件中使用filters参数注册

varapp=newVue({

el:'#app',

filters:{

'my-filter*:function(value){

)

}

))

过滤器函数接受表达式的值(之前的操作锌的结果)作为第一个参数。在下面这个示例中，capitalize过滤器

函数将会收到message的值作为第一个参数。

【实例3-15］使用capitalize过滤器函数将英文句子的首字母转换为大写

【操作要求】

使用capitalize过滤器函数将英文句子“welcometologin”的首字母转换为大写，即在页面中输出“Welcome

tologin”。

HTML将被渲染为：

<divid="app">

<p>welcometologin</p>

<p>Welcometologin</p>

</div>

3.6.2串联使用的过滤器

过滤器串联的形式如下：

{{message|filterA|filterB}}

HTML将被渲染为：

<divid="app">

<p>welcometologin</p>

<p>16</p>

</div>

在这个示例中，filterA拥有单个参数，它会接收message的值，然后调用filterB,并且filterA的处理结果

将会作为filterB的单个参数传递进来。

3.6.3使用带参数的JavaScript函数作为过滤器

由于过滤器是JavaScript函数，因此可以接受参数，例如：

{{message|filterA('argr,arg2)}}

这里，filterA是个拥有3个参数的函数。message的值将作为第一个参数传入，字符串‘arg1'将作为第二

个参数传递给filterA,表达式arg2的值将作为第三个参数传递给行IterA。

HTML将被渲染为：

<divid="appH>welcometologin</div>

3.6.4在v-bind:class表达式中使用过滤器

在v-bind表达式中也可以使月过滤器，格式为data|filter。

HTML将被渲染为：

<divid="app":class="Big">welcome</div>

应用实战

【任务3-1】编写程序代码实现英寸与毫米之间的单位换算

【任务描述】

编写程序代码实现英寸与毫米之间的单位换算，具体要求如下。

①通过监听来实现英寸与毫米之间的换算，即输入英寸值后自动换算为对应的毫米值，输入毫米值后自

动换算为对应的英寸值。

②在HTML中，将变量inch双向绑定到英寸对应的input,将变量millimeter双向绑定到毫米对应的

input,这样，当输入框中的数字发生改变时，就会触发监听了。

【任务实施】

在本模块的文件夹中创建网页文件case01-unitConverter.html，在该文件中实现英寸与毫米之间的单位换

算功能。

1.编写HTML代码实现要求的功能

<divid="main">

<!-将变量inch双向绑定到英寸对应的input->

英寸:<inputtype="text"v-model="inch">

<!--将变■millimeter双向绑定到亳米对应的input->

亳米:<inputtype="text"v-model="millimeter">

</div>

<pid="info"></p>

2.编写JavaScript代码实现要求的功能

略

网页unitConverter-case.html的初始浏览效果如图所示。

英寸:|0墓米:|0|

网页unitConverter-case.html的初始浏览效果

在“英寸”输入框中输入数字2毫米”输入框中会自动显示数值“50.8”，如图所示。

英寸：|?|亳米：倒.8|

【英寸】修改前值为:0.【英寸】修改后值为:2

输入2英寸自动换算为50.8亳米

经测试实现了要求的功能。

【任务3-2】编写程序代码