目录
一、常用的指令
（一）v-bind
1、绑定样式
2、$event
（二）v-on
1、v-on修饰符
2、按键修饰符
3、案例：Todolist
（三）v-model
1、 v-model和v-bind的区别
2、案例：数字倒数效果
3、修饰符
编辑
（四）v-show
（五）v-if、v-else-if和v-else
编辑
（六）v-for
1、v-for渲染表格
2、v-for遍历数字
3、v-for遍历字符串
4、v-for遍历对象
二、其他指令
三、计算属性
1、案例：统计还可以输入都是字数
2、案例：通过切换，显示通过和没通过，以及全部
3、案例：全选效果
一、常用的指令
（一）v-bind
- 动态的绑定元素的属性的值 可以简写为":"
1、绑定样式
<style>
.hide {
display: none;
}
#box {
width: 200px;
height: 200px;
background-color: violet;
}
</style> <div id="app">
<div :class="{'hide': !visible}" id="box">abc</div>
<!-- <div v-bind:style="{display:visible ? 'block' : 'none'}">123</div> -->
<button v-on:click="toggle">点击</button>
</div> <script>
Vue.createApp({
data() {
return {
//控制div的显示和隐藏
visible: true
}
},
methods: {
//切换显示隐藏
toggle() {
this.visible = !this.visible
}
},
}).mount('#app')
</script>
2、$event
- 文本框输入的数据，在文本框外面也能同步显示出来
- $event 是vue当中的事件对象
<div id="box">
<input type="text" v-bind:value="str" v-on:input="input($event)" /> {{str}}
</div>
<script>
Vue.createApp({
data() {
return {
str: "hello" //文本框里的数据
}
},
methods: {
input(e) { //把文本框输入的数据及时更新到str里
// console.log(e.target.value)
this.str = e.target.value
}
}
}).mount("#box")
</script>
（二）v-on
- 监听事件并响应
- v-on:事件="事件处理函数或语句" 可以简写为"@"
1、v-on修饰符
- stop —— 阻止冒泡
- capture —— 捕获模式
- prevent —— 阻止默认行为
- once —— 响应一次
- self —— 只有自身响应事件
- 点击small盒子时，同时触发small和big两个盒子，通过stop阻止冒泡
<style>
.big {
width: 200px;
height: 200px;
background-color: teal;
position: relative;
}
.small {
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
left: 50px;
top: 50px;
}
</style> <div id="box">
<div @click="big" class="big">big
<div @click.stop="small" class="small">small</div>
</div>
</div>
<script>
Vue.createApp({
data() {
return {
}
},
methods: {
big() {
console.log("big")
},
small() {
console.log("small")
},
}
}).mount("#box")
</script>
- capture：捕获模式
<div id="box">
<div @click.capture="big" class="big">big
<div @click.capture="small" class="small">small</div>
</div>
</div>
- prevent ：阻止默认行为
<a href="http://www.baidu.com" @click.prevent="go">点击</a>- once：响应一次
<div id="box">
<div @click.once="big" class="big">big
<div @click.once="small" class="small">small</div>
</div>
</div>
- self ：只有自身响应事件
<div id="box">
<div @click.self="big" class="big">big
<div @click.self="small" class="small">small</div>
</div>
</div>2、按键修饰符
- .enter
- .esc
<input type="text" @keyup.enter="go" />3、案例：Todolist
<div id="box">
<input type="text" v-model="str" @keyup.enter="add" />
<ul>
<li v-for="(item,index) in arr" :key="index">
{{item}}
<button @click="remove(index)">删除</button>
</li>
</ul>
</div> <script>
Vue.createApp({
data() {
return {
str: '', //存储文本框的数据
arr: [] //存储列表数据
}
},
methods: {
add() { //把文本框里的数据放到列表里
//如果文开不开为空，就不进行插入列表
if (this.str === "") return;
this.arr.push(this.str);
//清空文本框
this.str = ""
},
remove(index) {
this.arr.splice(index, 1)
}
}
}).mount("#box")
</script>
（三）v-model
- 双向绑定数据的指令
$event是vue当中的事件对象
1、 v-model和v-bind的区别
- v-model 双向绑定，数据变化了，视图变化，视图变化了，数据也变化
- v-bind 数据变化了，视图变化，视图变化了，数据不变化
2、案例：数字倒数效果
<div id="box">
<input type="text" v-model="str" v-bind:maxLength="maxLength" >
还可以输入{{maxLength-str.length}}个字
</div>
<script>
Vue.createApp({
data() {
return {
str:"" , //文本框数据
maxLength:20 //最大长度
}
},
}).mount("#box")
</script>
3、修饰符
- .lazy ——监听 change 事件而不是 input
- .number ——将输入的合法符串转为数字
- .trim ——移除输入内容两端空格
<div id="box">
<input type="text" v-model.number.lazy.trim="m" />+
<input type="text" v-model.number.lazy.trim="n" /> = {{m+n}}
</div>
<script>
Vue.createApp({
data() {
return {
m: 1,
n: 1
}
},
}).mount("#box")
</script>
（四）v-show
- 切换css样式，实现显示隐藏
<div id="box">
v-if: <div v-if="visible">hello world</div>
v-show <div v-show="visible">hello world</div>
<button @click="toggle">切换</button>
</div> <script>
Vue.createApp({
data() {
return {
visible: true //控制div的显示和隐藏
}
},
methods: {
toggle() {
this.visible = !this.visible
}
}
}).mount("#box")
</script>
（五）v-if、v-else-if和v-else
- 惰性指令，条件成立的时候，才进行渲染，条件不成立不进行渲染
<div id="box">
猜字优秀：<input type="text" v-model.number="inputNum">
<p v-if="inputNum>n">大了</p>
<p v-else-if="inputNum<n">小了</p>
<p v-else>对了</p>
</div> <script>
Vue.createApp({
data() {
return {
n: Math.ceil(Math.random()*10), //产生一个1--10的随机数
inputNum:0 //用户输入的数字
}
},
}).mount("#box")
</script>
（六）v-for
1、v-for渲染表格
<style>
table,
td {
border-collapse: collapse;
}
td,
th {
width: 100px;
height: 30px;
text-align: center;
}
</style> <div id="box">
<table border="1">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(item,index) in arr" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div> <script>
Vue.createApp({
data() {
return {
arr: [
{ id: 2, name: "aaa", age: 18 },
{ id: 3, name: "ccc", age: 22 },
{ id: 5, name: "eee", age: 19 }
]
}
},
}).mount("#box")
</script>
2、v-for遍历数字
<ul>
<li v-for="n in 5"> {{n}}</li>
</ul>3、v-for遍历字符串
<span v-for="(char,index) in str">{{char}}
<a href="#" v-if="index<str.length-1">
-
</a>
</span>4、v-for遍历对象
<ul>
<li v-for="(value,key,index) in obj">
{{key}}--{{value}}---{{index}}
</li>
</ul>二、其他指令
- v-html：渲染 html 代码
- v-text：相当于差值表达式
- v-pre：跳过编译这个元素和它的子元素的模板
- v-once：只渲染一次，忽略更新
- v-cloak：编译模板过程存在的指令，编译后自动取消
- v-html：渲染html代码
<div id="box" v-cloak>
v-html:<p v-html="str"></p>
差值表达式：{{str}}
</div> <script>
Vue.createApp({
data() {
return {
str: "<h2>hello world</h2>",
}
},
}).mount("#box")
</script>
- v-text：相当于差值表达式
<div id="box" v-cloak>
差值表达式:<span>{{n}}</span> <br>
v-text:<span v-text="n"></span>
</div>
- v-pre：跳过编译这个元素和它的子元素的模板
<div id="box" v-cloak>
<span>{{n}}</span> <br>
v-prev:<span v-pre>{{n}}</span>
</div>
- v-once：只渲染一次，忽略更新
<div id="box" v-cloak>
<span>{{n}}</span> <br>
v-once:<span v-once>{{n}}</span>
</div>
- v-cloak：编译模板过程存在的指令，编译后自动取消
<style>
[v-cloak] {
display: none;
}
</style> <div id="box" v-cloak>
<div>{{n}}</div>
</div> <script>
setTimeout(() => {
Vue.createApp({
data() {
return {
str: "<h2>hello world</h2>",
n: '1234356'
}
},
}).mount("#box")
}, 2000)
</script>
三、计算属性
- 根据数据的变化自动计算更新最新的值
- 数据变，值就变，数据不变，取缓存
<div id="box">
<input type="text" v-model="str" /> <br>
{{reverseStr}}
<button @click="getInfo">取计算属性的值</button>
</div> <script>
Vue.createApp({
computed: {
reverseStr() {
return this.str.split("").reverse().join("") + Math.random()
}
},
data() {
return {
str: "hello world"
}
},
methods: {
getInfo() {
console.log("getINfo", this.reverseStr)
}
}
}).mount("#box")
</script>
1、案例：统计还可以输入都是字数
<div id="box">
<input type="text" v-model="str" v-bind:maxLength="maxLength" >
{{info}}
</div> <script>
Vue.createApp({
computed:{
info(){
return `还可以输入${this.maxLength-this.str.length}个字`
}
},
data() {
return {
str:"" , //文本框数据
maxLength:20 //最大长度
}
},
}).mount("#box")
</script>
2、案例：通过切换，显示通过和没通过，以及全部
<div id="box">
<ul>
<li v-for="item in filterList" :key="item.id">
<input type="checkbox" v-model="item.pass" />
{{item.name}} {{item.age}}
</li>
</ul>
<button @click="type='all'">全部</button>
<button @click="type='yes'">通过的</button>
<button @click="type='no'">没通过的</button> {{type}}
</div> <script>
Vue.createApp({
computed: {
filterList() {
return this.list.filter((item) => {
if (this.type === 'all') { //取全部同学
return true
}
else if (this.type === 'yes') { //取及格的同学
return item.pass
}
else {
return !item.pass //取不及格的同学
}
})
}
},
data() {
return {
type: 'all', // 'all' 全部 'yes':及格 'no' 不及格的
list: [
{ id: 1, name: "aaa", age: 19, pass: false },
{ id: 2, name: "bbb", age: 22, pass: true },
{ id: 3, name: "ccc", age: 15, pass: false }
]
}
},
}).mount("#box")
</script>
3、案例：全选效果
<div id="box">
<input type="checkbox" v-model="select" /> {{select}}
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox" v-model="item.flag" />
{{item.name}} {{item.price}}
</li>
</ul>
</div> <script>
Vue.createApp({
computed: {
select: {
get() { //读取时执行
// return this.sel
//每一项目选中这个全选按钮才选中，有一个不选中就不选
return this.list.every(item => item.flag)
},
set(v) { //修改时会执行
// this.sel=v;
//全选全部选功能
this.list.forEach(item => item.flag = v)
}
}
},
data() {
return {
sel: false, //默认全选复选框没有选中
list: [
{ id: 1, name: "aaa", price: 19, flag: false },
{ id: 2, name: "bbb", price: 22, flag: true },
{ id: 3, name: "ccc", price: 15, flag: false }
]
}
},
}).mount("#box")
</script>
