IT入门 > 教程 >

绑定多个class

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

类的绑定

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

指令的值数据-简写

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

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点 页面载入时，input 元素自动获取...

多个复选框

div id=app input type=checkbox id=name1 value=木木 v-model=checkedNames label for=name1木木/label input type=checkbox id=name2 value=曾庆林 v-model=checkedNames label for=name2曾庆林/label input type=checkbox id=name3 value=mumu v...

按键修饰符

div class="explain"> 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 按键码 使用 keyCode 特性也是允许的： Vue 提供了绝大多数常用的按...

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的...

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。 {{item}} var app=new Vue({ el...

索引

{{item.name}}-{{index}}-{{item.age}} 结果是 mumu-0-18 zql-0-22 曾庆林-0-28...

对象循环输出

{{item.name}}--{{item.age}} var app=new Vue({ el:'#app', data:{ items:[ {name:"mumu", age:18}, {name:"zql", age:22}, {name:"曾庆林", age:28}, ] } })...