Vue 基本语法
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
当msg属性改变,页面内容相应改变,但是是单向的
<span>Message: {{ msg }}</span>
由于html中内不能使用“Mustache”语法 (双大括号)这个格式进行赋值,所以通过v-bind: 进行赋值
<div v-bind:id="dynamicId"></div>
它们只要存在就意味着值为 true,如果
isButtonDisabled
的值是 null
、undefined
或 false
,则 disabled
特性甚至不会被包含在渲染出来的 <button>
元素中。
<button v-bind:disabled="isButtonDisabled">Button</button>
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。在大括号中是单个表达式,不能是语句
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
v-if
指令将根据表达式 seen
的值的真假来插入/移除 <p>
元素。
<p v-if="seen">现在你看到我了</p>
v-bind 对元素的与数据进行绑定
v-bind 简写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 简写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
v-for 循环
<li v-for="item in tem" >{{item.age}}--{{item.sex}}</li>
v- for if
<li v-for="item in stu" v-if="item.sex=='girl'">{{item.age}}--{{item.sex}}</li>