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