前端-vue基础5-差值表达式
插值表达式语法：{{}}
使用时请注意以下几点：
插值表达式是vue框架提供的【指令】
插值表达式中 不可以写代码片段 会报错
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性（下篇文章讲）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导入包 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.添加id为app的div，将来要被vue控制-->
<div id="app">
<!-- 注意 这是{{}} 其实是vue框架提供的【指令】 -->
<!-- {{}} 语法 叫做 插值表达式 -->
<p>{{msg}}</p>
<hr>
<p>{{msg.length}}</p>
<hr>
<p>{{msg + '~~~~~'}}</p>
<hr>
<p>{{dlag ? '条件为真' : '条件为假'}}</p>
<hr>
<!-- 插值表达式中 不可以写代码片段 会报错-->
<!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> -->
<h1 title="hello">娃哈哈</h1>
<!-- 3.注意属性节点中不能使用插值表达式 -->
<!-- 如果要为元素节点动态绑定数据，我们要用其他方法 -->
<!-- <h1 title="{{msg}}">娃哈哈</h1> -->
</div>
<!-- 注意如果指令想要生效，必须放在vue控制的区域内 -->
<!-- <h1>{{msg}}</h1> -->
<script>
// 3.创建vue实例对象，并指定要控制的页面区域
const vm = new Vue({
// VM 实例对象，会监听data中，每一项数据的变化，
// 只要监听到了数据的改变，就会重新把el指定区域中的所有指令
// 从新解析一遍
el:'#app',// 要控制页面上的哪个区域
data:{//表示页面上要渲染的数据
msg:'我是geyao!',
flag:true
}
})
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南