文章分类 - Vue指令
摘要:可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。 因为它会选择 Vue 实例数据来作为具体的值。 你应该通过 JavaScript 在组件的data 选项中声明初始值。 输入框 <div
阅读全文
摘要:根据表达式的真假值来渲染元素 用法大致一样: <h1 v-show="ok">Hello!</h1> 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
阅读全文
摘要:条件判断(v-if\v-else) v-if 指令将根据表达式的真假值(true 或 false )来决定是否插入 元素。
阅读全文
摘要:指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式. 指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应. 如下例子: 实例 <div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue
阅读全文
摘要:监听事件 事件:click\keydown <button v-on:click="greet"></button> 可以简写为 <button @click="greet"></button> v-on 可以接收一个定义的方法来调用。 示例: <div id="example-2"> <!-- `
阅读全文
摘要:列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。 <ul id="example-1"> <li v-for="item in items"> {{ i
阅读全文
摘要:v-bind 指令可以更新 HTML 属性: <a v-bind:href="url">...</a> 在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 缩写: <a :href="url">...</a>
阅读全文
摘要:v-text://插入一段文本<div id="app"> <p v-text="message"></p></div><script> var vm = new Vue({ el:'#app', data:{ message:'hello world !' } })</script> v-html
阅读全文
摘要:文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值: <span>Message: {{ msg }}</span> Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。 通过
阅读全文