差值表达式

浩平凡的梦

已于 2023-11-30 15:20:04 修改

阅读量135

点赞数

文章标签： vue.js javascript 前端

于 2023-11-30 15:18:30 首次发布

本文链接：https://blog.csdn.net/2301_76792945/article/details/134711965

版权

表示方法:

{{ data }}

data: 引用 Vue 实例中的数据

应用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>

<body>
    <div class="wrap">
        msg: {{ msg }} <br><br>
        num: {{ num }} <br><br>
        我还可以直接运算拿到结果：{{ 1+1 }} <br><br>
        我还可以进行字符串拼接：{{ '今天天气怎么样' + ' —-> ' + ( 3 > 1? '今天天气晴朗' : '今天雷雨交加' )}} <br><br>
        普通书写方式：{{ arr[0] }}, {{ arr[1] }}, {{ arr[2] }}<br><br>
        上面等同于：{{ arr.join('、') }}<br><br>
        name: {{ obj.name }}, 
        age: {{ obj.age }}, 
        <!-- 
            值得注意的是差值表达式可以支持三元运算符，但是！！！
            不支持if...else..等逻辑语句
         -->
        sex: {{ obj.sex ? '男':'女'}}, 
        isSingle: {{ obj.isSingle ? '是':'否'}} <br><br>
        
        计算属性：{{ color }} <br><br>
        函数：{{ fun() }}
        
    </div>

    <!-- 引入vue的js文件 -->
    <script src="./js/vue.js"></script>

    <script>
        new Vue({
            el:'.wrap',
            data: {
                msg: '我是字符串信息',   // 字符串 --> String类型
                label: '<h1>我是标签信息</h1>',
                num: 123456,            // 数值类型 --> Number类型
                arr: ['星期一','星期二','星期三'],    // 数组 --> Array
                obj: {                  // 对象 --> Object
                    name: '小明',    
                    age: 19,        
                    sex: 1,             // 1代表男, 0代表女 --> Boolean类型
                    isSingle: true,     // 布尔 --> Boolean
                }   
            },
            computed: {
                color(){
                    return '我喜欢红色'
                }
            },
            methods: {
                fun(){
                   return '我是函数'
                }
            },
        })
    </script>
</body>
</html>

对应展示效果如下：

总结：

①：差值表达式的写法：{{ data }} data是Vue实例中的数据

②：差值表达式中的数据可以是字符串、数值类型、数组、对象、计算属性、函数（后续会讲解对应的使用方式的）

③：差值表达式可以支持三元运算符、可以支持对应的API

④：差值表达式支持字符串拼接

④：差值表达式可以直接进行数值运算、并且能直接显示出对应结果

⑤：差值表达式不支持 if...esle... 、for循环、while循环等逻辑语句

浩平凡的梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
差值表达式

①：差值表达式的写法：{{ data }} data是Vue实例中的数据②：差值表达式中的数据可以是字符串数值类型数组对象计算属性函数（后续会讲解对应的使用方式的）③：差值表达式可以支持三元运算符、可以支持对应的API④：差值表达式支持字符串拼接④：差值表达式可以直接进行数值运算、并且能直接显示出对应结果⑤：差值表达式不支持if...esle... 、for循环、while循环等逻辑语句。
复制链接

扫一扫