Vue开发中的一些小问题解决方法

1.动态绑定本地图片,网络图片可以直接显示,本地图片要用require方式

<img :src='imgurl' />


data(){
    return{ 
        imgurl:require('../assets/img/index/qjsb01.png'),//本地图片需要require方式引入
    
    }
 },

2.给一个标签绑定点击事件,在事件里面有路由跳转语句时,这个标签一定不要用<a>标签,用其他的标签,用<a>标签可能点击一次跳不到别的页面。

<!--<a href="#" @click="clickmycenter">企业中心</a>-->
用<a></a>标签点击一下跳不过去,换成别的标签就可以直接跳转了,例如换成了<span></span>标签

<span class="head-r-nav" @click="clickmycenter">企业中心</span>


js部分:------------------------------

    //点击事件
    clickorder(){
        this.$router.push("/mycenter/order") //跳到企业中心页面

    },

3.computed计算属性传参,计算属性不能直接传参,直接写会报错,要把参数写到return方法里面

传递,示例如下:

<div  v-for="(item,index) in list" :key="index">
    ¥<span class="one-xiaoji">{{getoneheji(item)}}</span>
 </div>


data(){
    return{ 
      list:[
        {id:1,checked:false,name:"小雨伞",num:1,price:99.99,oneheji:""},
        {id:2,checked:false,name:"小红伞",num:1,price:200,oneheji:""},
        {id:3,checked:false,name:"小黄伞",num:1,price:110,oneheji:""},

      ],//订单列表
     

    }
  },
  computed:{
    //每一件商品的总金额,随着数量的加减自动计算
    getoneheji:()=>{
        return (item)=>{
            console.log("computed()里面的getoneheji传参item----",item)
            let oneheji=Number(item.price)*Number(item.num)
            oneheji=Number(oneheji).toFixed(2)
            return oneheji
        }
    },
    //底部的合计,选中商品的总金额
    getAll(){
        var heji=0
        this.list.forEach(item => {
            console.log("1-heji",heji,typeof(heji))
            if(item.checked){
                heji=Number(heji)+(Number(item.price)*Number(item.num)) //保留两位小数
                console.log("2-heji",heji,typeof(heji))
                heji=Number(heji)
            }
            
        });
        heji=Number(heji).toFixed(2)
        return heji
    },
}

4.在数组中新增自定义属性

   let arr=[
      {id:1,name:"aaa"},
      {id:2,name:"bbb"},
      {id:3,name:"ccc"},
    ]
    for(let i=0;i<arr.length;i++){
      arr[i].checked=false
    }
    console.log("arr添加了自定义属性checked之后",arr)

5.删除数组中指定位置的元素

let arr=[1,2,3,4]
let index=1
 arr.splice(index,1)
 console.log("arr",arr)

6.修改网站图标,网站图标默认都是vue的官方图标,要改成自己网站的图标,要准备一个后缀是.ico的图片,放到项目里,在index.html引入这个文件

​​​​​​​

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值