Vue基础语法之计算属性、事件监听以及条件渲染（整理分享）

本篇文章给大家总结了vue的基础语法，其中包括计算属性、事件监听、条件渲染、以及列表渲染等等相关问题，希望对大家有帮助。

Vue笔记二：基础语法

1、 插值（动态内容）

Mustache语法(双大括号)

将data中的文本数据，插入到HTML中，此时数据是响应式的。

<span>Message: {{ msg }}</span> <span>{{firstName}}{{lastName}}</span> <span>{{firstName+lastName}}</span> <span>{{firstName+""+lastName}}</span> //使用 JavaScript 表达式 <h2> {{counter*2}}</h2> <h2>{{ number + 1 }}</h2> <h2>{{ ok ? 'YES' : 'NO' }}</h2> <h2>{{ message.split('').reverse().join('') }}</h2>

指令

• v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

• v-html :解析html并展示
• v-text：渲染指定dom的内容文本，类似Mustache，一般不用，不够灵活，会覆盖标签内所有内容
• v-pre：原封不动展示标签内容，不进行解析

<h2 v-pre>{{message}} </h2>

结果：{{message}}

• v-cloak：解决vue解析卡顿会出现{{}}闪烁的问题
  vue解析之前，p有属性v-cloak，解析后没有此属性。
  所以 可以通过这个指令隐藏未编译的 Mustache 标签直到实例准备完毕

  <p id="app" v-cloak>{{message}}</p>

  <style>       [v-cloak]{ display:none; }   </style>

2、绑定属性（动态属性）

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。简写为冒号:

1、元素的src和href

<img :src="ImgUrl" /><a :href="aHref">百度</a>

2、class绑定

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

<p v-bind:class="{ active: isActive }"></p>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
你可以在对象中传入