您的位置:首页 > 产品设计 > UI/UE

【Vue】 -(4) 数据绑定语法

2016-04-26 09:26 441 查看
Vue的数据绑定的语法。

<div>{{ a }}</div>
单次注入
<div>{{* a }}</div>
注入原始html
<div>{{{htmltext}}}</div>
Html特性:{{}}可以使用在html属性中
<div id="{{a}}"></div>
过滤器:在表达式后面过滤,比如返回大写化
<div>{{a | capitalize}}</div>

<!--
作者:332068039@qq.com
时间:2016-04-25
描述:指令:V-开头,指令的值只能是 绑定表达式
-->
根据ok的真假来插入YES
<p v-if="ok">YES</p>
有的指令携带参数
<a v-bind:href="url">链接</a>
绑定onclick
<a href="#" v-on:click="function1">链接</a>
v-bind缩写
<a :href="url">ddd</a>
v-on缩写<br />
<a :href="ok" @click>点击</a>

//生命周期
var vm=new Vue({
el:'#app',
data:{
a:1,
htmltext:"<a style='color:#F00' href='this.a'>I love you</a>",
url:'www.baidu.com'
},
methods:{
function1:function(){
alert();
}
},
//当Vue实例被创建的时候调用
created:function(){
console.log('a is:'+this.a)
},
//当存在el对应的时候调用
ready:function(){
console.log('ready');
},
//VUE实例被销毁的时候调用
destroyed:function(){
console.log("Vue实例被销毁");
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息