当前阅读教程:Uni-app入门到精通教程 > 5.1.2 变量的定义和使用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 5.1.1 Vue页面介绍 | 下一篇: 5.1.3 事件的定义和使用 |
5.1.2 变量的定义和使用在vue页面<script>代码块中的data区块定义变量,然后在<template>代码块中使用变量。变量的使用代码格式如下: {{变量名}} 变量名放在左边两个大括号{{ 和右边两个大括号}}之间,下面通过案例来讲解。 在<script>代码块中的data里面定义了变量bianliang01和值,在<template>代码块中就可以显示变量的内容,变量数据的显示使用双大括号将变量包起来。 页面完整代码如下: <template> <view> <!-- 在{{}}中间写变量的名称 --> bianliang01的值:{{bianliang01}} </view> </template>
<script> export default { data() { return { bianliang01: "黄菊华老师" //定义变量名和值 } }, methods: {
}, onLoad:function(){ //在console控制台输出变量的值 //变量名前需要跟上this,this指的是当前页面的引用 console.log("bianliang01的值:" + this.bianliang01) } } </script>
<style>
</style> 页面效果如图所示。 【uniapp参考资料】 (1)uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 (2)uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 (3)基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 (4)毕业设计网 (5)小程序编程网 (6)计算机编程网 |
|
上一篇: 5.1.1 Vue页面介绍 | 下一篇: 5.1.3 事件的定义和使用 |