vue考点查询(vue考点电话)

Vue考点：电话

Vue.component('phone-record', {
props: {
callType: String,
phoneNumber: Number,
callDuration: Number
},
template: `

通话类型：{{ callType }}
电话号码：{{ phoneNumber }}
通话时长：{{ callDuration }}秒

`
})
new Vue({
el: '#app',
data: {
phoneRecords: [
{ callType: '呼入', phoneNumber: 13901234567, callDuration: 120 },
{ callType: '呼出', phoneNumber: 13801928374, callDuration: 60 }
]
}
})

电话记录是一个非常常见的需求，比如手机通话记录、电话客服记录等。在Vue中，我们可以很方便地通过组件来展示这些电话记录。

上面的代码中，我们定义了一个名为phone-record的组件，它接受三个属性：callType、phoneNumber和callDuration，分别代表通话类型、电话号码和通话时长。在组件的模板中，我们使用v-bind指令将这三个属性绑定到p标签中，从而将电话记录显示出来。

在Vue实例中，我们定义了一个phoneRecords数组，其中包含了两条电话记录。在HTML中，我们可以通过v-for指令来循环渲染这些电话记录组件，从而展示所有的电话记录。如果我们需要新增或删除电话记录，只需要修改phoneRecords数组即可。