- 博客(17)
- 收藏
- 关注
RSS订阅原创 1.mounted 2.setTimeout、setInterval
vue3 1.mounted 2.setTimeout、setInterval
2022-06-16 10:10:49
515
原创 vue 父子通信( props、$emit ) 结合 双向数据绑定 ( v-model ) 案例
先看一下页面渲染效果:把父组件num的值传到子组件中 , 渲染 ( props )子组件 data 定义 , 用于接收父组件传值 , 渲染 ( data )不在data中定义会报错 ,(不能直接改变父组件的值)父传子:代码：子组件： <div> <!-- 渲染子组件中定义data: firstnumber1 --> <div>data:{{firstnumber1}}</div> <!-- 渲染父组件
2021-09-09 17:24:23
537
原创 vue 组件通信 （父传子、子传父）
父传子：使用props子组件： <div> <h5>{{msgs}}</h5> </div>export default { // props props:[ "msgs"]}父组件：<div> <Child :msgs="msg"></Child> </div>import Child from "./components/Child.vue"expor
2021-09-07 17:06:02
116
原创 同意协议、下一步 小案例
在注册账号时，在下方经常需要点击同意协议，如果不点击同意那么我们将不能进行后续的操作。 <input type="checkbox" v-model="defaultNo">同意协议 //disabled 禁用 <button @click="dowOneStep" :disabled="!defaultNo">下一步</button> data(){ return{ defaultNo:false } },
2021-09-07 14:56:57
871
原创 vue 实现购物车功能 数量加减、删除、单价、总价
直接上代码：<div> <table> //标题 <tr> <th class="title"></th> <th class="title">书籍名称</th> <th class="title">单价</th> <th class="title">数量</t
2021-09-03 14:02:11
4292
1
原创 使用input框，了解虚拟dom，diff算法
虚拟dom我们使用账号登录、邮箱登录切换的案例： <div v-if="judge"> <span>账号登录</span> <input type="text" > </div> <div v-else> <span>邮箱登录</span> <input type="text"> </div> &
2021-09-01 15:25:02
270
原创 简单实现 账号登录、邮箱登录切换 v-if、v-else的使用
v-if 、v-else 条件判断当v-if 条件成立时，显示v-if的内容，否则显示v-else的内容。 //v-if 必须将它添加到一个元素上 <div v-if="judge"> <span>账号登录</span> <input type="text" > </div> //v-else 元素必须紧跟在带 v-if 或 v-else-if 的元素的后面否则不会被识别，将会报错（报错信息如下图
2021-08-31 17:25:22
342
原创 vue中computed 和 methods 区别
我们先来看一下概念，文字性的描述，可能小伙伴不是很明白，那我们就上代码~计算属性computed ： 不支持异步；响应式依赖进行缓存 ，数据发生改变，才会重新进行计算；多对一 或 一对一；属性值是函数。computed本身就是一个属性，完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。其本质是computed内部有两个方法（set和get），computed最终返回的结果是get方法的返回值，默认会走get方法，数据变化时，调用set方法。不需要加括号。内部变量
2021-08-24 15:47:04
453
原创 简单实现计算总价
<div> <ul> <li v-for="(item,index) in list" :key='index'>{{item.name}} <span>{{item.price}}元</span></li> </ul> <div>总价：{{totalPric}}</div> </div>data(){ return{ .
2021-08-24 12:45:30
259
原创 vue实现动态列表点击字体换色
点击列表，变换颜色 <ul> <li @click="btn(i)" :class="{boxStyle:i == listIndex}" v-for="(item,i) in list" :key="i"> {{item}} </li> </ul> //@click点击事件 //v-bind:绑定事件，简写 : 绑定属性和数据。 //for 循环v-for="(item,i) in list" //
2021-08-24 11:03:36
390
原创 vue 点击按钮实现随机颜色
随机颜色 点击切换 <button @click="btn">点击</button> <div :style="{color:colorRender}" >内容</div> data(){ return{ listColor:['red','blue','yellow','pink','green'], colorRender:"" } }, //取整 Math.floor 的随机数 Math.ran
2021-07-20 11:18:33
1200
原创 vue 实现购物车数量加减
vue 实现数量加减HTML<div class="shoplist" v-for="(item,index) in list" :key="index"> <div>{{item.name}}</div> <div class="redAdd shoplist"> <button @click="red(index)">-</button> <div>
2021-07-15 14:15:17
2459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人