localStorage统计用户浏览次数&父子组件传参。例

mac2024-06-02  54

简单了解一下

localStorage统计用户浏览次数

在vue页面中加载 mounted() { #如果在页面刷新的次数显示 NaN,则先存入count次数,localStorage.setItem('count',0) localStorage.setItem('count',0) #存成数字类型,之后再执行下面的 #声明count变量,从localStorage中获取count var count = localStorage.getItem('count') #判断如果为空或者为空字符串 if(count==null || count== ""){ #条件满足后,默认给localStorage存入 1 localStorage.setItem('count',1) }else { # 每次浏览时count累加 count = parseInt(count) + 1 #累加后的count存入localStorage localStorage.setItem('count',count) } #最后把count 赋值给一个变量,用{{}}形式显示出来 this.showcount = count }

简单了解一下,例

vue父子组件传参方式

1、父组件 #父组件 // <footer1 :goods_name="goods_username"></footer1>-------------->传递参数----重要 // props:['goods_name'] 接收参数 <template> <div id="goods"> <h1>我是父组件,首页,菜单</h1> <a href="javascript:viod(0);" @click="goods_id(1)">水果</a> <a href="javascript:viod(0);" @click="goods_id(2)">电器</a> <a href="javascript:viod(0);" @click="goods_id(3)">家具</a> <input type="text" v-model="goods_username"> <footer1 :goods_name="goods_username" aa="小明" bb="小花"></footer1> </div> </template> <script> //导包----嵌套导包 import Addgoods from '@/components/addgoods' export default { name: "goods", data:function(){ return{ goods_username:'1111' } }, //声明把子组件嵌套进来 components:{ footer1:Addgoods, }, methods:{ goods_id:function (gid) { this.goods_username = gid } }, mounted() { //读取接口获取所有分类 this.axios({ url:'/api/api/cate/', method:'post', data:{} }).then((res)=>{ console.log(res) if(res.data.code==200){ //从后台获取数据 this.cate_list = res.data.message } }).catch((err)=>{ console.log(err) }) } } </script> 子组件 <template> <div id="addgoods"> 我是字组件 {{goods_name}} {{aa}}---{{bb}} </div> </template> <script> export default { name: "addgoods", //goods_name相对应,props接收 props:['goods_name','aa','bb']----重要 } </script> <style scoped> </style> 子组件---------渲染数据 #用监听不同变化的属性值 渲染数据 watch:{ goods_name:function () { this.axios({ url:'/api/api/cart/', method:'post', data:{'cid':this.goods_name} }).then((res)=>{ console.log(res) if(res.data.code==200){ //拿到数据赋值 this.cart_list = res.data.message } }).then((err)=>{ console.log(err) }) } }
最新回复(0)