「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。
vue中的常见指令
指令是什么?
在vue 中,以v-开头的行内属性;vue 赋予这些属性一些特殊的功能
常见的指令:
- v-model 把表单元素的vuele和data中的每个属性绑定在一起
- v-text 把数据绑定到 DOM 元素中,也具有响应式,会把之前的覆盖掉,v-text 不识别标签
- v-html 同上 不同的是可以识别标签
- v-if 当属性值为 true 的时候则显示当前元素,如果为 false 当前元素不显示,但会显示 v-else 中的内容
- v-show 当属性值为 true 的时候,显示元素,为false 时 隐藏该元素;
- v-if 是控制DOm元素,如果为false页面中就没有这个元素,而v-show 是设置元素的 display
- v-bind 用于绑定动态属性,并且可以简写成一个:属性名,v-bind过后,这个属性就可以使用 data 中的该属性的值了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="flag">
<div v-text="title"></div>
<div v-html="title"></div>
<div v-if="tt">v-if</div>
<div v-else>v-else</div>
<div v-show="hh">v-show</div>
<img v-bind:src="img" alt="">
</div>
<script src="js/vue.js"></script>
<script src="js/6-vue中的常用指令.js"></script>
</body>
</html>
let vm = new Vue({
el: '#app',
data: {
flag: 'abc',
title: `<h2>这是一个h2</h2>`,
tt: false,
hh: false,
yy: false,
img: 'clock.png',
names: ['张三', '李四']
}
});
- v-for
用于列表渲染,根据给定的值生成多个相同的元素
- v-for Array数组有多少项就要生成多少个li
<li v-for="(a, index) in arr">{{a.name}} {{a.age}}</li>
- v-for Object 对象有多少个 key 就生成多杀个li
<li v-for="(a, b) in obj">{{a}} {{b}}</li>
- v-for num 生成 num 个 li
<li v-for="(a, b) in num">{{a}} {{b}}</li>
- v-for str 生成 str.length 个 li
<li v-for="(a, b) in str">{{a}} {{b}}</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
v-for Array 数组有多少项就要生成多少个 li
<li v-for="(a, index) in arr">{{a.name}} {{a.age}} </li>
v-for Object 对象有多少个 key 就生成多少 li
<li v-for="(a, b) in obj">{{a}} {{b}}</li>
v-for num 生成 num 个 li
<li v-for="(a, b) in num">{{a}} {{b}}</li>
v-for str 生成 str.length 个 li
<li v-for="(a, b) in str">{{a}} {{b}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [
{name: '张三', age: 15},
{name: '李四', age: 18}
],
num: 5,
str: 'zfpex',
obj: {
goods: 'iPhone',
manufacture: '富土康',
price: '$1000'
}
}
})
// v-for 用于列表渲染
</script>
</body>
</html>
