Solutions to some small problems in Vue development

1. Dynamically bind local images, network images can be displayed directly, and local images must use the require method

<img :src='imgurl' />


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

2. Bind a click event to a tag. When there is a routing jump statement in the event, the tag must not use the <a> tag. Use other tags. If you use the <a> tag once, you may not be able to jump to other pages.

<!--<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. Calculated properties pass parameters. Calculated properties cannot be passed directly. If you write them directly, you will get an error. You must write the parameters into the return method.

Pass, the example is as follows:

<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. Add custom attributes to the array

   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. Delete the element at the specified position in the array

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

6. Modify the website icon. The website icon is the official icon of Vue by default. To change it to the icon of your own website, prepare a picture with the suffix .ico, put it in the project, and import this file in index.html

Solutions to some small problems in Vue development

Guess you like