- 剑指Vue3:从入门到实践
- 尚硅谷教育编著
- 438字
- 2024-07-24 13:30:35
2.1.1 插值语法
前面我们提过,插值语法用来向标签体中插入一个动态的值。插值语法的结构很固定,用双大括号包含一个JavaScript表达式,即{{JavaScript表达式}}。值得一提的是,插值语法只可以作为一个标签的标签体文本或者标签体文本的一部分,不能作为标签的一个属性值。双大括号中可以包含任意JavaScript表达式,可以是一个常量、一个变量,或一个变量对象的方法调用,甚至可以是一个三目表达式。
但需要注意的是,模板中的变量读取数据的来源都是配置指定的data对象。后续还会讲解其他的数据来源,在这里读者暂时只需要理解为data对象。
来看一个简单的Vue使用实例,同时读者可以思考下方代码的运行效果。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_28_1.jpg?sign=1739662197-EX6tlC75gwiBAGQJw2U91fQIibHEEH1X-0-cd51418ef38512e918965fc8713a49fe)
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_29_1.jpg?sign=1739662197-r7vI0jP0XQ5zme8yWSKgjP8Nlehatueb-0-e41c9c7ef14ae1d06bd89010c4fa9150)
上面的代码使用插值语法分别包含了常量“123”、变量“msg”、变量对象的方法调用“msg.toUpperCase()”,以及三目表达式“score<60?'入学测试未通过,暂时不可以来尚硅谷学习':'入学测试通过,欢迎来尚硅谷学习'”。前面我们说过,模板中的所有变量读取的都是data对象中的数据,除常量“123”不需要读取数据以外,后三者都会读取data对象中对应的数据。因此,页面效果如图2-1所示。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_29_2.jpg?sign=1739662197-sMqd9b3QGOIXBPAgjZ0u0BGRjIEcOKTD-0-c1058107d7171401d029d01678531117)
图2-1 页面效果