网站推广的网站,网站商城首页怎么做吸引人,众讯 网站建设,深圳航空公司最新招聘前言
持续学习总结输出中#xff0c;今天分享的是插值表达式 {{}}
Vue插值表达式是一种Vue的模板语法#xff0c;我们可以在模板中动态地用插值表达式渲染出Vue提供的数据绑定到视图中。插值表达式使用双大括号{{ }}将表达式包裹起来。
1.作用#xff1a;
利用表达式进行…前言
持续学习总结输出中今天分享的是插值表达式 {{}}
Vue插值表达式是一种Vue的模板语法我们可以在模板中动态地用插值表达式渲染出Vue提供的数据绑定到视图中。插值表达式使用双大括号{{ }}将表达式包裹起来。
1.作用
利用表达式进行插值渲染到页面中
表达式是可以被求值的代码JS引擎会讲其计算出一个结果
如以下的情况都是表达式
money 100
money - 100
money * 10
money / 10
price 100 ? 真贵:还行
obj.name
arr[0]
fn()
obj.fn()2.语法
插值表达式语法{{ 表达式 }}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title插值表达式/title
/head
body
div idappp{{ nickname }}/pp{{ nickname.toUpperCase() }}/pp{{ nickname 你好 }}/pp{{ age 18 ? 成年 : 未成年 }}/pp{{ friend.name }}/pp{{ friend.desc }}/p
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {nickname: tony,age: 18,friend: {name: jepson,desc: 热爱学习 Vue}}})
/script
/body
/html运行结果
3.错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
p{{hobby}}/p //如果在data中不存在 则会报错2.支持的是表达式而非语句比如if for ...
p{{if}}/p3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
p title{{username}}我是P标签/p4.总结
插值表达式的作用是什么? 利用表达式进行插值将数据渲染页面中语法格式? {{ 表达式 }}插值表达式的注意点: 1、使用的数据要存在 (data) 2、支持的是表达式而非语句 if … for 3、不能在标签属性里面使用
最后分享一句话 生活的最好状态是冷冷清清的风风火火。 ——木心 本次的分享就到这里了
