Vue
文章平均质量分 56
changyme
这个作者很懒,什么都没留下…
展开
-
【Vue】条件渲染与列表渲染
条件渲染 v-if <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-if="awesome"> Vue! </h1> <h1 v-else>//使用v-else来表示v-if的else块 Oh no! </h1> 因为v-if是一个指令,因此必须将其添加到一个元素上。 若想切换多个元素,则可以把一个<template>元素当作不可见的包裹元素,并在上面使用v-if原创 2021-08-27 21:10:27 · 96 阅读 · 0 评论 -
【Vue】Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 绑定HTMLclass 对象语法 传给v-bind:class一个对象以动态切换class. <div v-bind:class="{active:i原创 2021-08-27 21:09:03 · 84 阅读 · 0 评论 -
【Vue】计算属性与侦听器
计算属性与监听器 计算属性 模板内尽量使用简单的表达式,而不要做复杂的函数转换。 对于任何复杂逻辑,都可以使用计算属性实现。 <div id="example"> <p> Original message:"{{message}}" </p> <p> Computed reversed message:"{{reversedMassage()}}" </p> </div>原创 2021-08-27 20:59:40 · 86 阅读 · 0 评论 -
【Vue】模板语法
模板语法 插值 文本 数据绑定最常见的形式就是使用双大括号进行文本插值。 使用v-once指令能够进行一次性插值而不能继续更新视图。 <span v-once>{{msg}}</span> 原始HTML 双大括号不会解释数据,只会解释为普通文本,因此需要使用v-html属性 <p>Using mustaches:{{rawHtml}}</p> <p>Using v-html directive:<span v-html:"rawHtml"&原创 2021-08-27 20:14:52 · 88 阅读 · 0 评论 -
【Vue】Vue实例初步
创建第一个vue应用 vue代码分为两部分,视图与脚本。 创建标签->左右双大括号声明变量(文本插值)->创建vue对象 数据与方法 响应式系统 当Vue实例被创建时,将data对象中的所有property加入响应式系统,当property的值发生改变时,视图会产生响应。 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property var data={a:1} var vm=new Vue({ data:data原创 2021-08-27 20:13:15 · 72 阅读 · 0 评论