5.1.vue入门基础学习笔记-基础指令介绍(表达式)

表达式

每个绑定都只能包含单个表达式，可以是一串的方法计算，可以是三元表达式
除了v-for指令外其他指令均可以使用表达式

• 有效表达式：

<!-- 字符串不可变 -->
{{* message }}
<!-- 字符串连接 -->
{{ message + '官网地址：www.csdn.com' }}
<!-- 字符串反转 -->
{{ message.split('').reverse().join('') }}

• 无效表达式

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

• 数组、复杂对象取值

<div id="test">
    {{arrays[4][0]}}
</div>
<script>
    new Vue({
        el: '#test',
        data: {
            arrays:[
                ['1-1','1-2','1-3','1-4'],
                ['2-1','2-2','2-3','2-4'],
                ['3-1','3-2','3-3','3-4'],
                ['4-1','4-2','4-3','4-4'],
                ['5-1','5-2','5-3','5-4']
            ]
        }
    })
</script>


---------------------------------------------------------


<div id="test">
    {{arrays[0].sex}}
    {{arrays[0]['sex']}}
</div>
<script src="../bower_components/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data: {
            arrays:[{
                name:'苏曼',
                sex:'男',
                age:18
            },{
                name:'刘肖肖',
                sex:'女',
                age:18
            },{
                name:'苏漠漠',
                sex:'男',
                age:2
            }]
        }
    })
</script>
---------------------------------------------------------
<div id="test">
    {{arrays.suman.name}}
    {{arrays['suman']['sex']}}
</div>
<script src="../bower_components/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data: {
            arrays:{
                suman:{
                    name:'苏曼',
                    sex:'男',
                    age:18
                },
                lxx:{
                    name:'刘肖肖',
                    sex:'女',
                    age:18
                },
                sumomo:{
                    name:'苏漠漠',
                    sex:'男',
                    age:2
                }
            }
        }
    })
</script>