您现在的位置是:首页 > Javascript
当前栏目
vue模板语法{插值表达式}的用法
2023-02-25 18:20:38 时间
插值表达式是什么?
对比: jQuery中:text( )函数 原生Js中:innerHTML Vue中:{{ message }}
<div id="app">
{{ message }}
</div>
这段代码的意思可以用原生js的思路理解为,一个父元素id:app,现在设置他的innerTEXT,设置内容为变量message
export default {
data() {
return {
message:'这里就是显示的文字了'
}
}
//这段代码会被自动渲染为:
<div id="app">
这里就是显示的文字了
</div>
插值表达式也可以放计算结果{computed}
<template>
<div>{{com}}</div>
</template>
<script>
export default {
data() {
return {};
},computed:{
com(){
return 2+2
}
}
};
</script>
这里{{com}}渲染的结果很简单2+4所以结果为4 这里有一个需要注意的点就是{{com}}里面的名字需要是computed中函数的名字比如com()>{{com}}
相关文章
- 前端面试题汇总-Vue篇
- Lua-cjson安装及部署
- 树莓派海文SeaFile配置Nginx前端反代并启用HTTPS全攻略
- JS手撕(二) 数组扁平化、浅拷贝、深拷贝
- JS手撕(三) 节流、防抖
- JS手撕(五) new、Object.create()、Object.assign()
- JS手撕(六) trim、模板字符串、千分位分隔符
- JS手撕(七) 事件总线
- js-手撕8
- JS手撕(九) 常用Promise API
- JS手撕(十) 冒泡排序、插入排序
- JS手撕(十一) 选择排序、快速排序
- HTML基础
- 校招前端经典react面试题(附答案)
- 2023前端二面react面试题(边面边更)
- 校招前端二面高频vue面试题1
- 2023前端二面高频vue面试题集锦1
- 高级前端必会手写面试题及答案1
- 手撕常见JS面试题1
- 高级前端二面手写面试题(边面边更)1