指令
v-once
只会渲染一次数据,在之后不会在随着数据的变动而切渲染dom
<div id="app" v-once >
v-html
有属性值
数据是html代码,则此指令会解析显示。
msg:"<div>aaaa</div>"
<div id="app" v-html="msg">
v-text
有属性值
显示文本数据,其显示与{{属性}}相同,但是其写法不同且不够灵活
<div id="app" v-text="msg">
v-pre
不对数据解析来显示数据
<div id="app" v-pre>{{messgae}}
--------------------显示-------------------
{{message}
v-cloak
数据未解析渲染前先将标签隐藏。等获得后在显示出来
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" v-cloak>{{msg}}
v-bind
语法糖(简写): :
eg: ‘<a :href="url">百度</a>’
绑定数据到标签属性值
<a v-bind:href="url">百度</a>
const app=new Vue({
el:'#app',
data:{
url:"http://www.baidu.com",
counter:0,
msg:"收到货卡号是"
}
})
v-bind 动态绑定class
<div id="app" :class={addRed:false}>{{msg}}
key:value
value字符串还是变量:给value加单引号则为字符串。否则即为变量。
格式:class={key:boolean}
如为true, class会添加属性值,否则不会
动态绑定只要动态去更改ture|false 即可,
- 将此设置为data的一个属性值即可。当存在多个class会自动合并。
<div id="app" :class={addRed:isAdd}>{{msg}}
data:{
isaddRed:false
}
- 也可设置方法返回对象过去
<div id="app" class="add" :class="addClass()">{{msg}}
addClass:function(){
return {addRed:this.isaddRed}
}
v-bind 动态绑定style
key:css属性
<div id="app" :style="{fontSize:fSize+'px'}">
// 省略 Vue 部分代码为data中的属性
fSize:10,
computed 计算属性
在其中可以定义属性,其定义的属性是由方法产生的。因为是属性在对其定义的时候尽量不以get、set开头。
注:computed 其有缓存,多次使用,其计算属性只会调用一次。
methods 重复使用都会去重新调用,当methods中有大量代码时,其性能相比较computed会很差
<div id="app" >
{{myFunName}}
</div>
// 省略 Vue 部分代码,其属相登记与data、methods 同级
computed:{
// 为get方法
myFunName:function(){
return this.lastName+this.firstName
}
计算属相的本质是实现其属性的get、set方法,但是一般不需要去实现set方法因而其简写的方式为上面所示
myFunName:{
set:function(newValue){
},
get:function(){
return "myName"
}
}