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写过渡，可以设置不同的进入和离开动画，