Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面。它包含了一系列的指令(Directives)来简化在 HTML 模板中操作和渲染数据的过程。以下是一些 Vue.js 中常用的基础指令:
v-model
: 用于在表单控件元素和应用状态之间创建双向数据绑定。例如,<input v-model="message">
会将 input 元素的值绑定到 Vue 实例中的message
属性。v-bind
: 用于动态地绑定 HTML 属性到 Vue 实例中的数据。例如,<a v-bind:href="url">
会将该元素的 href 属性绑定到 Vue 实例中的url
属性。v-if
/v-else
/v-else-if
: 用于根据条件来渲染或销毁元素。例如,<p v-if="isDisplayed">显示这个段落</p>
可以根据isDisplayed
的值来决定是否显示该段落。v-for
: 用于循环渲染数组或对象。例如,<li v-for="(item, index) in items">{``{ index }} - {``{ item }}</li>
可以根据items
数组中的内容来动态地生成列表项。v-on
: 用于监听 DOM 事件,并在触发时执行指定的方法。例如,<button v-on:click="handleClick">点击我</button>
会在按钮被点击时执行handleClick
方法。
以上是 Vue.js 中一些常用的基础指令,它们可以帮助你更方便地操作和渲染数据。