Vue框架整理：插值、表达式 与 过滤器
插值 与 表达式
1、 双大括号：{{ }} 是最基本的“文本”插值方法，能够实时显示我们需要的数据
<script>
var app=new Vue({
el:"#v1",
data:{
date:new Date()
},
mounted:function () {
var current=this;
this.timer=setInterval(function () {
current.date=new Date().getSeconds(); //每秒刷新当前时间的秒数位
},1000);
},
beforeDestory:function () {
if(this.timer){
clearInterval(this.timer);
}
}
})
script>
{{ }} 也可以直接在HTML中直接使用JavaScript的部分表达式进行一些简单运算：
<body>
<div id="v1">
<p>
{{ today.split("") }}
p>
<p>
{{ mood ? "放松" : "高兴" }}
p>
div>
<script src="vue.min.js">script>
<script>
var app=new Vue({
el:"#v1",
data:{
today:"今天是周末",
mood:true
}
})
script>页面显示：
这里需要注意一下，目前只支持单个表达式、并且不能使用自定义变量，只能用Vue白名单内的全部变量，Date , Math等；
2、 v-pre ： 这个不会将 双大括号{{ }} 进行转义
<p v-pre>{{ escaped }}p>
页面上显示 ： {{ no escaped }}
没有将{{ }}中内容进行转义，直接输出括号里的信息
3、v-html 直接渲染出 HTMLElement
<body>
<div id="v1">
<span v-html="link">span>
div>
<script src="vue.min.js">script>
<script>
var app=new Vue({
el:"#v1",
data:{
link:""
}
})
script>
body>
页面显示：
Vue 过滤器
可以用管道符 | 对数据进行过滤，过滤的规则自定义，然后通过Vue实例添加选项 filters设置
<body>
<div id="v1">
{{ date | setDate }}
div>
<script src="vue.min.js">script>
<script>
var app=new Vue({
el:"#v1",
data:{
date:new Date()
},
filters:{
setDate:function (value) {
var date=new Date(value);
var year=date.getFullYear(),
m=date.getMonth()+1,
month=m<10 ? "0"+m : m,
d=date.getDate(),
day=(d<10) ? "0"+d : d;
return year+"-"+month+"-"+day;
}
}
})
script>
body>
过滤器也可以串联或接收参数：
语法：
串联： {{ message | 方法1 | 方法2 }}
接收参数 ： {{ message | 方法名（‘arguments1’ , ‘arguments2’）}}
简单的数据处理可以使用过滤器，遇到复杂的还是建议用其他方法计算比较好一些