一、v-bind绑定某个属性,可以省略，
1.1、例如：v-bind:class == ：class
1.2、v-bind:class的作用
1.2.1、我们可以向v-bind:class传入一个对象，从而动态地切换class样式。
v-bind:class="{active:isActive}",
上述语法意味着，
active
这个 class 的存在与否，取决于
isActive
这个 data 属性的
truthy
值。
如：
效果图：
1.2.2、向v-bind:class直接绑定一个类名时，data数据中应该包含有此类名
模板中的代码
export default中的代码
样式代码
效果，链接文字包含有aaa,bbb的样式
@keyup.ctrl 的语法意思为：只能按下ctrl键才调用showHide方法
1.2.3、v-bind:class可以绑定数组，数组中又可以嵌套json对象
样式：
效果图：
分析： li标签会有item变量类名的样式，当点击时，同时拥有onBor类名的样式。 item会解析为变量的类名，onBor解析为类名。
二、v-model指令
v-model指令通常用于双向绑定数据
复选框的双向绑定，data中定义一个数组来接收
<template>
<div>
<!--lazy 延迟更新数据，失去焦点时显示数据-->
<!--number 规定输入类型，当一开始不是数字时，输出原来的，否则将数据转化为数字类型-->
<!--trim 去空格-->
<!--input 数据双向绑定-->
<input type="text" value="" v-model.lazy="texts">
<input type="text" value="" v-model.number="texts">
<input type="text" value="" v-model.trim="texts">
{{ typeof texts}}
{{ texts}}
<br/>
<!--复选框-->
<input type="checkbox" value="篮球" v-model="checkboxes">篮球
<input type="checkbox" value="羽毛球" v-model="checkboxes">羽毛球
<input type="checkbox" value="兵乓球" v-model="checkboxes">兵乓球
{{checkboxes}}
<br/>
<!--单选框-->
<input type="radio" value="男" v-model="radioes">男
<input type="radio" value="女" v-model="radioes">女
{{radioes}}
<br/>
<!--下拉框-->
<!--<select v-model="selects">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{selects}}
</div>
</template>
<script>
export default{
name:"lesson03",
data(){
return {
texts:"",
checkboxes:[],
radioes:[],
selects:"",
msg:"子级向父级传递数据"
}
},
</script>
