vue的表达式多种样式,都可以组合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表达式用法</title>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="box">
<!-- 1)json 数据(变量) -->
<h1>{{ msg }}</h1>
<!-- 2)数字 -->
<p>{{ 10 }}</p>
<!-- 3)字符串 -->
<h1>{{ "string" }}</h1>
<!--
注意区分变量和字符串:
引号包裹的为字符串。只要没有引号包裹的,都会被系统解析成变量或者是方法名
-->
<!-- 4)表达式 -->
<h1>{{ 1+1 }}</h1>
<h1>{{ msg+name}}</h1>
<!-- 可写入js代码,但是不推荐写复杂的代码
常用写法:写入三目运算符(问号冒号表达式,三元运算符)(能够代替if else)
原因:mvvm设计思想,是为了使页面和数据进行很好的分离;
如果在表达式中写入过多的逻辑代码,那么违背了最初的设计思想;
也就使代码看起来很复杂,难以维护
注:if else 不能写入
-->
<h1>{{ 2>3?'true':'false' }}</h1>
<!-- js进行字符串反转 字符串分割split().revrese().join() -->
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'hello',
name: '二狗'
}
});
</script>