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

最新推荐文章于 2025-02-07 10:56:36 发布

weixin_30237719

最新推荐文章于 2025-02-07 10:56:36 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/boonya/p/7090067.html

本文通过一个简单的Vue.js实例展示了如何使用Vue的数据绑定特性来显示动态内容，并演示了字符串反转的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>