目录
一 v-model表单元素
1.1 v-model绑定文本域的value
1.1.1 lazy属性：光标离开再发请求
1.1.2 number属性：如果能转成number就会转成numer类型
1.1.3 trim属性：去文本域输入的前后空格
1.2v-model绑定单选checkbox
1.3代码展示
二 v-for循环指令
三 计算属性
四 侦听器
一 v-model表单元素
v-model其实我自己就是单纯的把他理解成双向绑定指令。
和v-bind一样都是操作数据，只是这个一般用在表单中。
1.1 v-model绑定文本域的value
<!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--> <!-- lazy属性：光标离开再发请求 --> <input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/> <h2>{{username}}</h2>我们用v-model绑定username，当我们在文本框中输入值后，对应的username也会进行数据的双向绑定，从而展示在页面上，效果如下:
1.1.1 lazy属性：光标离开再发请求
如上面所示，给v-model加上lazy属性，可以实现光标离开后再执行。
1.1.2 number属性：如果能转成number就会转成numer类型
<!-- number属性：如果能转成number就会转成numer类型，比如文本域中输入数字原本时string，但是加上这个属性就会转成number --> <input type="text" name="age" v-model.number="age"> <button @click="change()">获取age类型</button> <h2>age的类型:{{type}}</h2>正常来说，type=“text”的文本域就算输入的数字，也是string类型，而是由这个.number属性，就可以把数字转成number类型，方便进行运算需求。
1.1.3 trim属性：去文本域输入的前后空格
<!-- trim属性：去文本域输入的前后空格 --> <input type="text" v-model.trim="username">
1.2v-model绑定单选checkbox
实现代码如下：
<!-- v-model绑定单选checkbox --> <input type="radio" name ="sex" v-model="sex" value="男">男 <input type="radio" name ="sex" v-model="sex" value="女">女 <h2>{{sex}}</h2>具体逻辑如下：
效果展示：
1.3代码展示
完整代码以及注释如下:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--> <!-- lazy属性：光标离开再发请求 --> <input type="text" placeholder="请输入用户名" v-model.lazy="username" value="默认值"/> <h2>{{username}}</h2> <!-- number属性：如果能转成number就会转成numer类型，比如文本域中输入数字原本时string，但是加上这个属性就会转成number --> <input type="text" name="age" v-model.number="age"> <button @click="change()">获取age类型</button> <h2>age的类型:{{type}}</h2> <!-- trim属性：去文本域输入的前后空格 --> <input type="text" v-model.trim="username"> <!-- v-model绑定单选checkbox --> <input type="radio" name ="sex" v-model="sex" value="男">男 <input type="radio" name ="sex" v-model="sex" value="女">女 <h2>{{sex}}</h2> <!-- v-mode绑定下拉框 --> <select name="city" v-model="city"> <option value="cs">长沙</option> <option value="bj">北京</option> <option value="sh">上海</option> </select> <h2>{{city}}</h2> </div> <script type="text/javascript" src="../vue.js"></script> <script> // 1.创建app const app = Vue.createApp({ // data: option api data: function() { return { username:"" , sex:"女" , city:"sh", age:18, type:"" } }, methods:{ change(){ this.type = typeof this.age } } }) // 2.挂载app app.mount("#app") </script> </body> </html>效果图如下:
二 v-for循环指令
一般用在表格展示数据的时候。
直接展示表格循环获取数据的代码：
还有可以直接获得数组的下标index：
完整代码展示:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2>列表展示</h2> <ul> <!-- 从数组arr中取出值name --> <li v-for = "name in arr">{{name}}</li> </ul> <ul> <!-- 从数组arr中取出值name和对应的小标index --> <li v-for = "(name,index) in arr">{{index}}--{{name}}</li> </ul> <h2>学生信息展示</h2> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <!-- 遍历对象数组 --> <tr v-for = "stu in student"> <th>{{stu.id}}</th> <th>{{stu.name}}</th> <th>{{stu.age}}</th> </tr> </table> <h2>嵌套For循环</h2> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>女朋友</th> </tr> <!-- 遍历对象数组 --> <tr v-for = "stu in student"> <th>{{stu.id}}</th> <th>{{stu.name}}</th> <th>{{stu.age}}</th> </tr> </table> </div> <script type="text/javascript" src="../vue.js"></script> <script> // 1.创建app const app = Vue.createApp({ // data: option api data: function() { return { arr:["张三" , "李四" , "王五"] , student:[ {id:1, name:"张三", age:13, girfriends:[ { name:"小美", age:12 }, { name:"小芳", age:11 } ] }, { id:2, name:"李四", age:15, girfriends:[ { name:"小王", age:99 }, { name : "小玉", age:23 } ] } ] } }, }) // 2.挂载app app.mount("#app") </script> </body> </html>效果展示：
三 计算属性
说的明白一点，就是用来监听数据的。
这个函数里面有一个get函数，当需要获得get函数里面的属性的时候，就会自动调用这个get函数从而获取数据。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
input{
width: 50px;
}
</style>
<div id="app">
<input type="number" v-model="number1" >
+
<input type="number" v-model="number2" >
=
{{sum}}
<br>
<input type="number" v-model="number3" @mouseout="sum">
+
<input type="number" v-model="number4" @mouseout="sum">
=
{{sum}}
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function() {
return {
number1:0,
number2:0,
result:0
}
},
methods:{
// sum(){
// this.result = this.number1+this.number2
// }
},
methods:{
sum:function(){
return parseInt(this.number1) + parseInt(this.number2);
}
},
// 计算属性
computed:{
sum:{
get(){
//get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行
return parseInt(this.number1) + parseInt(this.number2); //此时的this就是vm
}
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>如上面这个代码，逻辑如下：
效果如下：
四 侦听器
和计算属性作用一样，都是用来监听数据的。
不过侦听器监听的数据是你自己设置的，设置完成后，当你设置的那个数据一旦发生变化，就会调用侦听器的函数，实现数据的重新计算等。
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1" >
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(book , index) in arr">
<th>{{index+1}}</th>
<th>{{book.name}}</th>
<th>{{book.day}}</th>
<th>{{book.price}}</th>
<th><button @click="subNumber(book.id) ">-</button>{{book.number}}<button @click="addNumber(book.id)">+</button></th>
<th><button @click="del(index)">移除</button></th>
</tr>
</table>
<h2>总价：{{sum()}}</h2>
</div>
<script type="text/javascript" src="../../vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function() {
return {
total:0,
nnumber:1,
arr:[
{
id:1,
name:"挪威的森林",
day:"2024.10.23",
price:102,
number:1,
},
{
id:2,
name:"活着",
day:"2024.10.11",
price:66,
number:1,
}
]
}
},
methods:{
sum(){
if(this.total===0){
this.arr.forEach(element => {
this.total+=(element.price*element.number)
});
}else{
return this.total
}
},
// updateCount() {
// alert(88)
// } ,
del(id){
this.arr.splice(id,1)
},
subNumber(id){
this.total+=10
this.arr.forEach(element => {
if(element.id===id){
if(element.number>0){
this.nnumber--
element.number--;
}
}
});
},
addNumber(id){
this.arr.forEach(element => {
if(element.id===id){
this.nnumber++
element.number++
}
});
}
},
// 使用onMounted来在页面加载完成后调用updateCount
// onMounted:(() => {
// updateCount();
// }),
watch: {
arr: {
handler(newValue, oldValue) {
this.total=0
this.arr.forEach(element => {
this.total += (element.number*element.price)
});
},
deep: true // 开启深度侦听
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
</html>逻辑如下：
