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

表达式

<!-- 字符串不可变 -->
{{* 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>