004 V 插值和表达式

不二如是 · 发表于 2018-8-30 16:46:22

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-8-30 17:15 编辑

登录/注册后可看大图

上一讲我们搞定了生命周期，本次来学习两个很使用的功能。

在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）

答案：

游客，如果您要查看本帖隐藏内容请回复

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅专辑（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

差点夹不住屁 · 发表于 2018-10-9 11:28:30

已学习,谢谢老板

lbjstudypython · 发表于 2018-11-26 23:16:43

1.T
2.浏览器默认时间
3.T

Ruide · 发表于 2020-4-8 10:09:01

T
浏览器默认显示时间
F

一笙彤 · 发表于 2020-6-18 10:34:30

suweixuan1998 · 发表于 2020-6-23 11:15:46

T
2018-08-30 17:06:33
F

kmq116 · 发表于 2020-7-19 23:03:45

1.是的
2.当前时间?
3.不能,上面有写

HanYanShuang · 发表于 2022-3-18 20:55:56

学习

jack6666 · 发表于 2022-10-24 20:53:52

kykio · 发表于 2024-1-22 11:15:19

围观

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 004 V 插值和表达式

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: