vue第三篇

3.1.表单输入绑定

<input type="text" v-model.lazy="username"><h3>用户名：{{username}}</h3><!-- lazy:懒惰：h3内的username默认是和v-model="username"实时更新，加上lazy之后，失去焦点之后才更新 --><input type="number" v-model.number="price"><h3>价格：{{price}}</h3><!-- number：过滤非数字，去掉非数字，失去焦点之后，非数字被去除，但其实 type="number" 就是限定只能输入数字--><input type="text" v-model.trim="info"><h3>信息：{{info}}...</h3><!-- trim:删除两边的空格$.trim():删除两遍的空格，中间的空格不会删除-->      

3.2 class 与style绑定

<div v-bind:class="'red'">绑定的class直接赋值字符串</div><!-- 1.绑定的class直接赋值字符串（red是类名） --><div :class="bg">绑定的class赋值变量值</div><hr><!-- 2.绑定的class赋值变量值  bg是变量，需在data中定义，--><div :class="{blue:true}">blue赋予true</div><br><div :class="{blue:false}">blue赋予false</div> <br><div :class="{blue:isShow}">blue赋予变量</div><br>  <!-- 3  class样式:布尔值，blue是类名布尔值为真，则给标签添加class的值，布尔值为假，则取消class的值变量值isShow 为真，则添加class类名 --><div :class="['gray','fs']">来看看我的样式</div><!-- 4. 使用数组增加两个class样式（gray，fs都是字符串类名，要加引号）--><div :class="[style1,style2]">来看看我的样式</div><!-- 4. 使用数组通过变量值增加两个样式--><div :class="[{gray:isShow},style2]">来看看我的样式</div><!-- isShow为真则添加类名gray样式，，style2对应的样式永远有 -->new Vue({        el:"#container",        data:{            bg:"blue",            isShow:false,            style1:"gray",            style2:"fs"        }    })

3.3style 方式

<div v-bind:style="{width:'100px',height:'100px',background:'red'}"></div><!-- 1.直接给style赋予样式对象  100px要加引号，单引号 --><div :style="add"></div><!-- 2.赋予style的变量值，由变量值定义样式 --><div :style="[add,add2]"></div><!-- 3.赋予style的数组值，由数组中的每个元素定义样式 -->new Vue({    el:"#container",    data:{        add:{width:"200px",height:"200px",background:"pink"},        add2:{width:'300px', height:'300px', background:"#ddd"},    }})      

4过渡

内容比好多，看文档吧，用vue写过渡，可以设置不同的进入和离开动画，