您的位置：首页 > 产品设计 > UI/UE

VueJS表达式支持：逻辑控制或运算

2017-06-28 15:50 393 查看

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ flag ? 'TRUE' : 'FALSE' }}<br>
{{ message.split('').reverse().join('') }}

</div>

<script>
new Vue({
el: '#app',
data: {
ok: true,
flag:false,
message: 'DLROW,OLLEH',
id : 1
}
})
</script>
</body>
</html>

效果：

采用多个反转的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ flag ? 'TRUE' : 'FALSE' }}<br>
{{ message.split(',').reverse().join(',') }}

</div>

<script>
new Vue({
el: '#app',
data: {
ok: true,
flag:false,
message: 'WORLD,HELLO',
id : 1
}
})
</script>
</body>
</html>

多个反转效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航