上一页 1 ··· 7 8 9 10 11 12 13 14 下一页
摘要: v-model的使用 实现双向绑定,即当数据改变时,界面同步更新,当界面改变时,数据也及时更新。 [A]的基本使用 1. v-model实现表单元素和数据的双向绑定 示例: <div id="app"> <input type="text" v-model="msg"> {{msg}} </div> 阅读全文
posted @ 2020-03-25 17:39 CarreyB 阅读(156) 评论(0) 推荐(0) 编辑
摘要: 示例代码: <script> /* 购物车买书的case 需求: 1. 点击按钮增加买书量,自动计算总价 2. 可移除某些书籍 3. 当所有书籍被移除后,页面显示购物车为空 移除书籍:修改数据模型即可,页面会自动修改 */ </script> <style> .tb{ border: black 3 阅读全文
posted @ 2020-03-25 13:35 CarreyB 阅读(145) 评论(0) 推荐(0) 编辑
摘要: 过滤器filters的使用 1. filters是vue中和和data,methods并列的对象 2. 过滤器中定义各个函数,用于将传入的数据进行过滤以下再展示 3. 使用案例 // DOM <div id="app"> 这本书的价格是:<span>{{bookPrice | twoPoint}}< 阅读全文
posted @ 2020-03-25 08:12 CarreyB 阅读(45) 评论(0) 推荐(0) 编辑
摘要: 在Vue中,并不是所有的数据改变都会响应式的反映到页面中 1. 可以做到响应式的方法 pop() push() shift() unshift() splice() sort() reserve() 2. 做不到响应式的方法 通过下标改变数组的元素, 这是因为Vue中没有监听数值改变的变化 解决: 阅读全文
posted @ 2020-03-24 16:32 CarreyB 阅读(69) 评论(0) 推荐(0) 编辑
摘要: v-for 用于循环遍历 [A] 循环遍历数组/对象,不需要下标时 <ul> <li v-for="item in movies">{{item}}</li> </ul> [B] 循环遍历数组/对象,需要下标时 若遍历的是数组,(item, index) item表示值,index表示下标 若遍历的 阅读全文
posted @ 2020-03-24 11:31 CarreyB 阅读(199) 评论(0) 推荐(0) 编辑
摘要: [A] v-if...v-else 条件显示 1. 行内属性v-if的值为true时,则当前标签才被渲染出来,值为false,则不被渲染出来 2. 当v-if和v-else成对出现时,在任意时刻可都只会渲染其中一个 示例: <div v-if="isShow">我的名字是:{{name}}</div 阅读全文
posted @ 2020-03-23 16:26 CarreyB 阅读(166) 评论(0) 推荐(0) 编辑
摘要: [A] v-on作用 作用:用于绑定事件,如监听鼠标事件,键盘事件等 简写:@ 绑定类型:Function | Inline satatment | Object 参数:event [B] v-on的参数传递 1. 基本使用,不传参时 <button @click="addNum()">add</b 阅读全文
posted @ 2020-03-21 15:01 CarreyB 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 计算属性 computed data中的数据可以直接在html中通过差值表达式直接引用,但是有时候,我们想要data中的数据经过转换或者简单的计算再展示 【注意】computed中定义的函数而非变量 1. 简单使用 computed:{ fullName(){ return this.lastNam 阅读全文
posted @ 2020-03-19 17:00 CarreyB 阅读(127) 评论(0) 推荐(0) 编辑
摘要: v-bind 1. 插值表达式可以将变量的值插入到模板的内容中,即标签内容区域,不能插入到行内属性的值中去,如a标签的href的值,img标签的src值。 2. v-bind可以给行内属性绑定变量的值 v-bind的基本使用 1. 表明某个行内属性绑定的是一个变量而不是一个具体的值 如:<img v 阅读全文
posted @ 2020-03-17 10:35 CarreyB 阅读(302) 评论(0) 推荐(0) 编辑
摘要: [A] mustach语法 mustache语法,也称为插值语法 使用方法 1. 在{{变量名}}中加入变量,即可在界面中直接替换成变量对应的值 2. 在{{表达式}}中加入表达式,如: {{name + " " + age}}, {{counter * 2}} [B] v-once 行内属性,表示 阅读全文
posted @ 2020-03-14 16:25 CarreyB 阅读(85) 评论(0) 推荐(0) 编辑
上一页 1 ··· 7 8 9 10 11 12 13 14 下一页