Vue基础-常用方法

<div id="app">
{{5+5}}<br>    <!--10-->

<div v-bind:class="{ classA: a, classB: b }"></div> <!--a是true的时候class包含classA，b为true的时候class包含classB，两者可以共存，都为true时 class='classA classB'-->

{{ ok ? 'YES' : 'NO' }}<br>    <!--ok是true的时候为YES，false的时候为NO-->

{{ message.split('N').reverse().join('') }}    <!--把message以N为分界线分割存入数组，把数组元素颠倒，把数据元素存入一个字符串-->

<div v-bind:id="'list-' + id">菜鸟教程</div> 
</div>

<script>
new Vue({
el: '#app',
data: {

a: true,

b: false,
ok: true,
message: 'RUNOOB',    //RUNOOB -> RU,OOB -> OOB,RU -> OOBRU
id : 1                               //id="'list-' + id" = list-1
}
})

alter(document.getelementById('app').innerHTML);
</script>

 

结果：

10
YES
OOBRU

菜鸟教程