IT入门 > 教程 >
  • 指令的值数据-简写

    2019/04/29 点击:12346

    p>在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子 div id=app p页面载入时,input 元素自动获取焦点:/p input v-focus=true/div script// 创建根实例new Vue({ el: #app, dire

  • 类的绑定

    2019/04/29 点击:8269

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型

  • 绑定多个class

    2019/04/29 点击:4867

    p>你可以在对象中传入更多属性来动态切换多个 class data 如下 data: { isActive: true, hasError: false} 渲染结果为

  • 对象绑定

    2019/04/29 点击:3939

    绑定的数据对象不必内联定义在模板里: 数据如下 data: { classObject: { active: true, 'text-danger': false }} classObject对象可以通过计算动态获得

  • 数组语法

    2019/11/03 点击:8012

    我们可以把一个数组传给 v-bind:class,以应用一个 class 列表: data: { activeClass: 'active', errorClass: 'text-danger'} 渲染为

  • 绑定内联样式-对象语法

    2019/11/03 点击:5952

    v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名 data: { activeCol

  • 动画概述

    2019/05/04 点击:4507

    Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。 语法 transition name = 过渡名称 div.../div/transition

  • 简单动画列子

    2019/05/04 点击:7942

    div id=demo button v-on:click=show = !show 切换 /button transition name=fade p v-if=showhello/p /transition/div new Vue({ el: #demo, data: { show: true }}) .fade-enter-active, .fade-leave-active { transition: opacity .5s;}.fade-enter, .fa

  • 过渡的类名

    2019/05/04 点击:8316

    v-enter :定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active :定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入

  • CSS 动画

    2019/05/04 点击:9096

    html div id=app button @click=flag=!flag切换/button div transition name=fade img src=img/sun.jpg height=260 v-show=flag alt= / /transition /div /div js new Vue({el:#app,data:{flag:true},}) css @keyframes fadeIn{ 0%{ opacity: 0; transform: