最新消息:文章中包含代码时,请遵守代码高亮规范!

vue-几点小结【原创】

JavaScript Michael 211浏览 0评论

一.图片渲染

<ul class=”gradeA” v-for = “user in user”>
<li>
<img src=”{{ user.avatar }}” alt=”” >
<span>{{ user.nickname }}</span>
</li>
<li>{{ user.joinNum }}</li>
</ul>

正确的格式为

<ul class=”gradeA” v-for = “user in user”>
<li>
<img :src=” user.avatar ” alt=”” >
<span>{{ user.nickname }}</span>
</li>
<li>{{ user.joinNum }}</li>
</ul>

mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:具体参见官方文档

二. v-if,v-else

<button @click =”choiceActivity(item.id)” v-if=”item.activityId”>更改活动</button>
<button @click =”choiceActivity(item.id)” v-else>选取活动</button>

注:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

三. v-for 列表渲染

<div id=”app”>
<ul>
<li v-for=”item in items”>{{ item }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ‘#app’,
data: {
items: {
a: “1”,
b: “2”,
c: “3”
}
}
})
</script>

结果:

<divid=”app”>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</div>

 

四。data functions should return an object

这个问题是 Vue 实例内,单组件的的data必须返回一个对象

如下:

export default {

 name : ‘demo’,
data() {
return {
user:[], //用户列表数据
id: ”,
nickname:”, //用户昵称
}
}

}

为什么要 return 一个数据对象呢?

官方解释如下: data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!

简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题。

纯手打

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23606.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Michael的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!