1
<view class="sg-font12">
{{subTitle}}
</view>
字体样式
.sg-font12 {
font-size: 12px;
}
对象的定义格式是这样的吗?
subTitle: { //子标题
type: String,
default: ''
},
2
字体加粗
.sg-font-bold {
font-weight: 700;
}
文本插值
<view class="sg-font-bold">{{title}}</view>
title定义
title: { //标题
type: String,
default: '关联客户'
},
遇到这么个语法,没看懂,继续学吧
<view :class="{'text':iconUrl!=''}">
</view>
3
在指令参数上也可以使用一个 JavaScript 表达式,需要包含在一对方括号内:
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
上面应该就是把属性 attributeName 绑定到 url 上.
这里的 attributeName
会作为一个 JavaScript 表达式被动态执行,计算得到的值会被用作最终的参数。举例来说,如果你的组件实例有一个数据属性 attributeName
,其值为 "href"
,那么这个绑定就等价于 v-bind:href
。
相似地,你还可以将一个函数绑定到动态的事件名称上:
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>
在此示例中, 当 eventName 的值是 "focus" 时, v-on:[eventName] 就等价于 v-on:focus.
4
修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。例如 .prevent
修饰符会告知 v-on
指令对触发的事件调用 event.preventDefault()
:
<form @submit.prevent="onSubmit">...</form>