数据渲染

插值表达式

{{ 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'  }}