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引入这个文件

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

猜你喜欢