vue for 初始值_「Vue学习记录四」指令全集

v-text

更新元素的 textContent，如果要更新部分的 textContent，需要使用 { {}} 插值

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{
    {msg}}</span>

v-html

更新元素的 innerHTML

<div v-html="html"></div>

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的 Mustache 标签。跳过大量没有指令的节点加快编译。

<div id="app">
    <span v-pre>{
    {message}}</span>  //这条语句不进行编译
    <span>{
    {message}}</span>
</div>

v-cloak

使用v-cloak，再给定一个display：none,可以解决在 F12-Network-slow3G 下{ {message}}出现闪烁的问题

<div id="app" v-cloak>
    <div>
        {
    {message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {
    {msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{
    {msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{
    {i}}</li>
</ul>

v-if

v-if可以实现条件渲染，Vue 会根据表达式的值的真假条件来渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

<a v-if="ok">yes</a>

如果属性值ok为true，则显示。否则，不会渲染这个元素。

v-else

v-else 是搭配 v-if 使用的，它必须紧跟在 v-if 或者 v-else-if 后面，否则不起作用。

<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if

v-else-if 充当 v-if 的 else-if 块，可以链式的使用多次。可以更加方便的实现switch语句。

<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

用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在 dom 中。但是v-show的元素会始终被渲染并保存在 dom 中，它只是简单的切换css的dispaly属性。

<h1 v-show="ok">hello world</h1>

提示ÿ