数据渲染

插值表达式

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