004 V 插值和表达式
本帖最后由 不二如是 于 2018-8-30 17:15 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了生命周期，本次来学习两个很使用的功能。
在Vue中使用双大括号“{{}}”是最基本的文本插入方式。
它会自动将双向绑定的数据实时显示出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myA">{{book}}</div>
<script>
var app = new Vue({
el:"#myA",
data:{
book:"《零基础入门学习Web开发》(Vue)"
}
})
</script>
</body>
</html>
大括号里的内容会被替换为data中book的值。
只要一修改book的值，大括号里的内容会被实时替换。
稍微复杂一点，例如实时显式当前的时间，每秒更新一下。
代码：
<div id="myA">{{time}}</div>
<script>
var app = new Vue({
el: "#myA",
data: {
time: new Date()
},
mounted: function(){
// 声明一个变量指向Vue实例this，保证作用域一致
var _this = this;
// 1s修改一次的定时器
this.timer = setInterval(function () {
// 每1s修改一次数据
_this.time = new Date();
}, 1000);
},
beforeDestroy: function () {
if (this.timer) {
// 在Vue实例销毁前，清除定时器
clearInterval(this.timer);
}
}
})
</script>
"2018-08-30T09:06:21.214Z"是浏览器默认的时间格式。
而不是我们日常看到的格式化时间（2018-08-30 17:06:33）。
有多种方法转换，Vue的过滤器（filter）或计算属性（computed）也可以实现，后续来弄。
如果有的时候想输出HTML，而不是将数据解释后的文本，那么可以使用v-html：
<div id="myA">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el:"#myA",
data:{
link:'<a href="ilovefishc.com">鱼C主页</a>'
}
})
</script>
link的内容会被渲染为一个具有点击功能的a元素。
Vue只支持单个表达式，不支持语句和流控制。
在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，就像上面的Date。
示范：
<!--这是语句，不是表达式-->
{{var book = "《零基础入门学习Web开发》(Vue)"}}
<!--不能使用流控制，要使用三元运算-->
{{if(ok} return msg}
课后作业
1、"{{}}"是最基本的插值方式？（T/F）
2、"2018-08-30T09:06:21.214Z"是什么时间？
3、表达式中可以使用流控制？（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 已学习,谢谢老板 1.T
2.浏览器默认时间
3.T T
浏览器默认显示时间
F T T
2018-08-30 17:06:33
F 1.是的
2.当前时间?
3.不能,上面有写 学习 1 围观
页:
[1]