Vue - 指令
前言
记录下vue中的一些基础指令。
具体使用
- 基础代码，以下示例变量均使用
setup()函数初始化变量
const {createApp} = Vue;
const message = "hello, world";
const app = {
// 入口函数
setup() {
return {
message
}
}
}
// 挂载(建立vue与dom的联系)
createApp(app).mount('#app')
v-text
v-text用于指定DOM的innerText
<div v-text="message1"></div>
v-html
v-html用于解析html文本
const message2 = "<div>hello, v-html</div>";
<div v-html="message2"></div>
v-bind
v-bind用于绑定标签的属性
const imgUrl = "https://img-blog.csdnimg.cn/d1b51b924c4d4ea88f8fecaa32708d63.jpg";
const attr = 'src';
const attr1 = 'sr';
<!-- v-bind -->
<img v-bind:src="imgUrl" />
<!-- v-bind简写 -->
<img :src="imgUrl" />
<!-- 动态绑定属性 -->
<img v-bind:[attr]="imgUrl" />
<img v-bind:[attr1+'c']="imgUrl" />
v-on
v-on用于绑定事件方法
<div v-on:click="onClick">onClick</div>
setup() {
function onClick(event) {
alert("hello");
}
return {
onClick
}
}
v-if
v-if条件成立则渲染DOM，不成立不渲染
const flag = true;
<div v-if="flag">hello, v-if</div>
<div v-else="flag">hello, v-else</div>
v-show
v-show时DOM会渲染，条件成立则显示，不成立不显示
const flag = true;
<div v-show="flag">hello, v-show</div>
v-for
v-for用于渲染一组数据
// array
const titles = ['title1', 'title2']
<div v-for="title in titles">{{title}}</div>
<div v-for="title of titles">{{title}}</div>
// map
book: {
title: '黄金时代',
author: '王小波'
}
<div v-for="(value, key) of book">{{key}}: {{value}}</div>
