随笔分类 - Vue v-指令
摘要:表单绑定 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定 <div id="app"> <input type="text" v-model="message"> {{message}} </div> <scr
阅读全文
摘要:v-for遍历数组 渲染一组数据的时候用 v-for v-for的语法类似于JavaScript中的for循环 格式如下:item in items的形式 我们来看一个简单的案例: 如果在遍历的过程中不需要使用索引值 v-for="movie in movies" 依次从movies中取出movie
阅读全文
摘要:条件判断 v-if和v-else <div id="app"> <div v-if="score>=90">优秀</div> <div v-else-if="score>=80">良好</div> <div v-else-if="score>=60">及格</div> <div v-else>不及格
阅读全文
摘要:事件监听 v-on介绍 在前端开发中,我们需要经常和用于交互。这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 作用:绑定事件监听器 缩写:语法糖 @ 预期:Function | Inline Statement | Object 参数
阅读全文
摘要:v-bind基础 用于绑定一个或多个属性值,或者向另一个组件传递 props 值 比如通过Vue实例中的data绑定元素的src和href,代码如下: <div id="app"> <img v-bind:src="imgSrc" alt=""> <a v-bind:href="link">Vuej
阅读全文
摘要:插值表达式的使用 将 data 中的文本数据,插入到HTML中可以通过 Mustache 语法(也就是双大括号),数据是响应式的 <div id="app"> <h2>Hello {{message}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{n
阅读全文