Vue.js最新文档：安装与构建详解

Vue文档

需积分: 50 120 浏览量更新于2024-07-20 收藏 1.56MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Class 与与 Style 绑定绑定
Class 与与 Style 绑定绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最
终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符
串之外，还可以是对象或数组。
绑定绑定 HTML Class
对象语法对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。如下模板:
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
如下 data:
data: {
  isActive: true,
  hasError: false
}
渲染为:
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ， class列表将变为 "static active text-
danger"。
你也可以直接绑定数据里的一个对象：
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }

列表渲染 →

使用使用 key 控制元素的可重用控制元素的可重用

Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例，当

允许用户在不同的登录方式之间切换:

<label>Username</label>

</template>

<label>Email</label>

</template>

在代码中切换 loginType 不会删除用户已经输入的内容，两个模版由于使用了相同的元素，<input> 会被复用，仅仅是替换了他们的

placeholder。

自己动手试一试,输入一些文本，然后点击「Toggle login type」进行切换

Username

Enter your username

Enter your email address

Toggle login type

这样也不总是符合实际需求，所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性 key ，key 必须带有唯一

的值。

<label>Username</label>

</template>

<label>Email</label>

</template>

现在输入文本将会在每次切换时重新渲染。自动动手试一试。

Username

Enter your username

Enter your email address

Toggle login type

注意, <label> 元素仍然会被复用，因为没有被添加了 key 属性。

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

注意 v-show 不支持 <template> 语法。

v-if vs v-show

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大

可能改变则使用 v-if 较好。

原文：http://vuejs.org/guide/conditional.html

← Class 与 Style 绑定

发现错误？想参与编辑？在 Github 上编辑此页！

剩余126页未读，继续阅读

jsjjdzg

粉丝: 0
资源: 4

Vue.js最新文档：安装与构建详解

vue.js 中文文档1.0

VUE2.0离线帮助文档 Chm

avue技术讲解文档ffff

尚硅谷vue文档 pdf

Vue在线预览pdf、word文档插件

vue3手册 pdf下载

vue-pdf出现pdf格式错乱的问题

vue-pdf预览pdf

vue3+pdf.js

vue3 vue-pdf-embed实现pdf预览

vue文件上传pdf

Vue使用vue-pdf

vue移动端浏览pdf

vue 如何预览pdf

前端pdf预览vue-pdf

vue3 quasar pdf

vue中pdf417插件使用

vue-pdf pdf加载失败

vue3-pdf-app手型工具

vue-pdf 使用

最新资源