Vue踩坑:Html属性差值弃用双大括号改用v-bind

input标签的placeholder属性

1
<input slot="right" type="number" pattern="[0-9]*" placeholder="{{phone_placeholder}}" autocomplete="off" v-model="user.phone" />

错误提示:

1
- placeholder="{{phone_placeholder}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

“placeholder”属性插值错误,如提示,使用 v-bind:placeholder 简写为 :placeholder 代替,即

1
<input slot="right" type="number" pattern="[0-9]*" :placeholder="phone_placeholder" autocomplete="off" v-model="user.phone" />

img标签的src属性

1
2
3
4
5
<div v-for="city in cityList">
<div>城市名称:{{item.title}}</div>
<div>城市ID:{{item.id}}</div>
<div>城市图片:<img src="{{item.img}}"></div> //这行是报错的
</div>

应改为

1
2
3
4
5
<div v-for="city in cityList">
<div>城市名称:{{city.title}}</div>
<div>城市ID:{{city.id}}</div>
<div>城市图片:<img :src="city.img"></div>
</div>

a标签的href属性

href的两种使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<a :href='msg'>APP开发技术博客</a>
<a href='http://www.appblog.cn'>APP开发技术博客</a>
</div>
</template>

<script>
export default: {
data () {
return: {
msg: 'http://www.appblog.cn'
}
}
}
</script>

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :