模板语法
让我们回到最开始
<div id="app">
<h1>{{message}}</h1>
</div>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
message:‘HelloWorld‘
}
})
</script>
这是一个HelloWorld,简单的通过模板输出。我们称之为数据绑定,而最常见的就是“Mustache”语法 (双大括号) 。
v-once指令,前面介绍过,一次性绑定,数据改变时,绑定的值是不会改变的。
<span v-once>这个将不会改变{{message}</span>
原始HTML
使用{{}}语法,输出时普通文本,而如果要输出带有HTML的,则要使用v-html指令
data:{
message:‘HelloWorld‘,
htmlText:‘<h2>这是一个标题,h2的标题</h2>‘
}
{{htmlText}}<br/>
<span v-html="htmlText"></span>
这个 span 的内容将会被替换成为属性值 htmlText
不编译模板
v-pre指令,可以跳过该元素和它子元素的编译过程,来显示原始的Mustache标签
<span v-pre>{{message}}</span>
输出的结果是{{message}},不对其进行编译。
延缓显示
v-cloak指令保持在元素上直到关联实例结束编译。
CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak>
{{message}}
</div>
<style>
[v-cloak]{
display:none;
}
</style>
当DOM运行到此处时,该模板还未编译,所以将其隐藏,等实例准备完毕后,显示。
自定义过滤器
在Vue2.0中已经除去了1.0的过滤器,但是可以自定义。分为局部的和全局的。
过滤器可以用在两个地方,双花括号插值和v-bind表达式。
语法为:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
“|”符号 左侧为需要过滤的数据,右侧为过滤器名称。
另外注意,使用过滤器后,需要返回值,才能正常显示。
局部过滤器定义
局部过滤器定义在实例中的filters选项中。
示例:过滤数字,四舍五入。
filters:{ //局部过滤器,仅当前Vue实例可用
number:(data,n) => {
return data.toFixed(n); //四舍五入,参数为保留的位数
}
}
{{12.356 | number(2)}}
过滤器方法声明,第一个参数始终未为传递来的数据,后面的参数一次为方法传递的参数。
全局过滤器
语法:Vue.filter( id, [definition] )
// 注册
Vue.filter(‘my-filter‘, function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter(‘my-filter‘)
示例:
Vue.filter(‘formatDate‘,function(val){
var d = new Date(val);
return d.getFullYear() + ‘-‘ + (d.getMonth()+1) + ‘-‘ + d.getDate() + ‘ ‘ + d.getHours() + ‘:‘ + d.getMinutes();
});
<h3>时间:<span>{{currentDate | formatDate}}</span></h3>
原文地址:http://blog.51cto.com/zouzhelu/2103740
时间: 2024-10-12 11:47:13