数据渲染
插值表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<div v-text="message"></div><!--会进行HTML转义-->
<div v-html="message"></div>
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
表单绑定
<!-- 绑定输入域 -->
<input type="text" v-model="user.password"/>
<!-- 绑定单选框 -->
<input type="radio" id="male" value="1" v-model='gender'>
<input type="radio" id="female" value="2" v-model='gender'>
<!-- 绑定复选框 hobby要定义成数组,否则不能多选 -->
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<!-- 绑定下拉框,occupation必须是数组 -->
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
修饰符
<!-- .number:转换为数值 -->
<input type="text" v-model.number="value">
<!-- .trim:去掉首尾空格 -->
<input type="text" v-model.trim="value">
<!-- .lazy:在失去焦点 或者 按下回车键时才更新 -->
<input type="text" v-model.lazy="value">
列表渲染
- 渲染list
<li v-for="(value,index) in list" :key="value.id">{{value}} and {{index}}</li>
- 渲染对象
<ul>
<li v-for="(value,key,index) in object">
{{key}} : {{ value }}
</li>
</ul>
条件渲染
v-if
<!-- flag为true时才被<渲染> -->
<span v-if="flag">content</span>
- v-else
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
- v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
<!-- flag为true时才被<显示> -->
<span v-show="flag">content</span>
样式绑定
- 绑定class
<!-- 当isActive为true时,这个标签就会增加active这个类,反之会删除active这个类 -->
<h2 :class="{ 'active': isActive }">home</h2>
<h2 :class="{ active: isActive }">home</h2>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为
<div class="active text-danger"></div>
- 绑定style
拼接字符串
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
样式对象
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}