VUE复习深入学习02.基础变量和修饰符的使用

vue中js变量的运用

{{ number + 1}}
{{ok ? 'YES' : 'NO'}}
{{ message.split(' ').reverse( ).join(' ') }}
<div v-bind:id=" 'list-' + id "></div>

请注意:这里每个绑定都只能包含单个表达式,所以下面的例子都不会生效.

{{ var a = 1}}
{{ if (ok) {return message}}}
<div v-bind:id=" 'list-' + id "></div>

点击div2会穿透 触发div1的点击事件 所以需要加上修饰符.stop这样可以阻止事件传递

<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>

methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}

样式也可以用变量传递

<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
style="width:200px; height:200px; text-align:center; line-height:200px;">
hi vue
</div>

<div
:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
</div>