Vue有坑慎入

vue小总结

<a href="detail.html?id={{ product.id }}" v-for='product in products'>
<div id='pro-title' v-text='product.title'></div>
<div v-if="product.status===1">预热中</div>
<div v-if="product.status===2">众筹中</div>
</a>

//编译的结果：
<a href="detail.html?id=11">
<div id='pro-title'>标题1</div>
<div>预热中</div>
</a>
<a href="detail.html?id=12">
<div id='pro-title'>标题2</div>
<div>众筹中</div>
</a>

//template和if的区别（一个模块需要循环或者遍历的时候，又不想再外层包一个div）
<template v-if="1===1">
<div>abc</div>
<div>dev</div>
</template>
//上面的代码会被编译如下：
<div>abc</div>
<div>dev</div>

<img :src="product.imgUrl" class="product-big-img"/>

<img :data-src="banner.bannerPicUrl" class="swiper-lazy"/>
<div class="swiper-lazy-preloader"></div>

vue可以在v-text中直接使用部分函数和部分表达式：

<div id="app">
<div v-text="'¥'+message+'元'"></div>
<div v-text="parseFloat(num).toFixed(2)"></div>
<div v-text="bool ?'right':'wrong'"></div>
<div v-text="pic || '/default.png' | addPer host "></div>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
num:3.1234,
bool:false,
pic:'',
host:'http://www.xyz.com'
}
})
</script>
//运行的结果如下：
¥Hello Vue.js!元
3.00
wrong http://www.xyz.com/default.png[/code]