vue中插值表达式使用的示例详解
作者：freedomSTUDENT
Vue的插值表达式是一种特殊的语法,用于在模板中动态地将数据绑定到视图中,一般使用双大括号 ("{{ }}")将表达式包裹起来,下面我们就来根据三个案例来深入了解下插值表达式的使用吧
作用：利用表达式进行插值渲染
语法：{ { 表达式 } }
案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备容器 -->
<div id="app">
{{str}} <br>
<!-- 转成大写 -->
{{str.toUpperCase()}} <br>
<!-- 转成小写-->
{{str.toLowerCase()}} <br>
<!-- 拼接 -->
{{str+'world'}} <br>
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 创建实例 -->
<script>
var app=new Vue({
el:'#app',
data:{
str: 'Hello'
}
});
</script>
</body>
</html>
案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备容器 -->
<div id="app">
{{age>=18? '成年':'未成年'}}
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 创建实例 -->
<script>
var app=new Vue({
el:'#app',
data:{
age:18
}
});
</script>
</body>
</html>
案例三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备容器 -->
<div id="app">
{{friend.name}} <br>
{{friend.age}}
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 创建实例 -->
<script>
var app=new Vue({
el:'#app',
data:{
friend:{
name:'张三',
age:18
}
}
});
</script>
</body>
</html>
注意：
1. 使用的数据要存在
2. { { 里面是表达式不是语句 } }
3. 不能在标签属性中使用{ { } } 例如 < div id=“ { { } } ”> </div>
到此这篇关于vue中插值表达式使用的示例详解的文章就介绍到这了,更多相关vue插值表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！