html和vue的区别,2018-09-16第四课 (v-html和v-text的区别,v-once和v-pre的区别,vue的生命周期,选项卡)...

1.v-html和v-text的区别

v-html可解析标签;v-text正常文本输出;

{{msg}}

{{msg}}

new Vue({

el:'#app',

data:{

msg:'今天周六,照常上课'

}

})

2.v-once和v-pre的区别

v-once只绑定一次;v-pre原样输出

new Vue({

el:'#app',

data:{

msg:'今天周六,照常上课'

}

})

3.vue的生命周期

使用v-cloak不显示未被编译的代码

Document

[v-cloak]{

display:none;

} //css样式

{{msg}}

//需要隐藏的未被编译的代码,不被显示的元素中添加

new Vue({

el:'#app',

data:{

msg:'hellovue'

},

beforeMount:function(){

alert(1111)

}

})

4.选项卡

  • {{value.title}}
  • {{value.content}}

new Vue({

el:'#app',

data:{

card:[

{title:'选项卡1',content:'选项卡1选项卡1选项卡1选项卡1',flag:true},

{title:'选项卡2',content:'选项卡2选项卡2选项卡2选项卡2',flag:false},

{title:'选项卡3',content:'选项卡3选项卡3选项卡3选项卡3',flag:false}

]

},

methods:{

chg:function(ind){

for(var i=0;i

this.card[i].flag=false; //点击的时候执行,使true转化为falese

}

this.card[ind].flag=true; //点击的时候执行,使false转化为true

}

}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值