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>
