02 Vue基础 - 图1

Vue基础

一 模板语法

1.插值语法

语法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>插值</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="box">
  11.     <ul>
  12.         <li>字符串：{{name}}</li>
  13.         <li>数值：{{age}}</li>
  14.         <li>数组：{{list1}}</li>
  15.         <li>对象：{{obj1}}</li>
  16.         <li>字符串：{{link1}}</li>
  17.         <li>运算：{{10+20+30+40}}</li>
  18.         <li>三目运算符：{{10>20?'是':'否'}}</li>
  19.     </ul>
  20. </div>
  22. </body>
  23. <script>
  24.     let vm = new Vue({
  25.         el: '#box', // 在box这个div中可以写 vue的语法
  26.         data: {
  27.             name: 'Darker', // 字符串
  28.             age: 18, // 数值
  29.             list1: [1,2,3,4],   // 数组
  30.             obj1: {name: 'Darker', age: 19}, // 对象
  31.             link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
  32.         }
  33.     })
  34. </script>
  35. </html>

02 Vue基础 - 图2

二 指令

1.文本指令

指令 释义
v-html 让HTML渲染成页面
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示

v-show与 v-if的区别： v-show：标签还在，只是不显示了（display: none） v-if：直接操作DOM，删除/插入 标签

v-html：让HTML渲染成页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-html</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <ul>
  11.         <li v-html="link1"></li>
  12.     </ul>
  13. </div>
  14. </body>
  15. <script>
  16.     let vm = new Vue({
  17.         el: '#box', // 在box这个div中可以写 vue的语法
  18.         data: {
  19.             link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
  20.         }
  21.     })
  22. </script>
  23. </html>

02 Vue基础 - 图3

v-text：标签内容显示js变量对应的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-text</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="box">
  11.     <ul>
  12.         <li v-text="link1"></li>
  13.     </ul>
  14. </div>
  16. </body>
  17. <script>
  18.     let vm = new Vue({
  19.         el: '#box', // 在box这个div中可以写 vue的语法
  20.         data: {
  21.             link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
  22.         }
  23.     })
  24. </script>
  25. </html>

02 Vue基础 - 图4

v-show：显示/隐藏内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-show</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="box">
  11.     <h3>案例：控件通过按钮来控制显示和小事</h3>
  12.     <button @click="handleClick()">点我</button>
  13.     <br>
  14.     <div v-show="isShow">isShow</div>
  15. </div>
  17. </body>
  18. <script>
  19.     let vm = new Vue({
  20.         el: '#box',
  21.         data: {
  22.             isShow: true,
  23.         },
  24.         methods: {
  25.             handleClick(){
  26.               this.isShow = !this.isShow    // this指的是当前的vue对象
  27.             },
  28.         }
  29.     })
  30. </script>
  31. </html>

008i3skNgy1gpsvtglr2ng30sy0kyn0l.gif

v-if：显示/删除内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-if</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="box">
  11.     <h3>案例：控件通过按钮来控制显示和消失</h3>
  12.     <button @click="handleClick()">点我</button>
  13.     <br>
  14.     <div v-if="isCreated">isCreated</div>
  15. </div>
  17. </body>
  18. <script>
  19.     let vm = new Vue({
  20.         el: '#box',
  21.         data: {
  22.             isCreated:true
  23.         },
  24.         methods: {
  25.             handleClick(){
  26.               this.isCreated = !this.isCreated    // this指的是当前的vue对象
  27.             },
  28.         }
  29.     })
  30. </script>
  31. </html>

008i3skNgy1gpsvtwu8u4g30sy0ky0vu.gif

2.事件指令

指令 释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件）

v-on:click 可以缩写成@click

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件指令</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  10. <div id="box">
  11.     <button v-on:click="handleClick1">点我1</button>
  12.     <!-- 下面这个用的多 -->
  13.     <button @click="handleClick2">点我2</button>
  14.     <!-- 如果不传参数，是没有区别的 -->
  15.     <button @click="handleClick3()">点我3-1(带括号)</button>
  16.     <!-- 如果要传参数 -->
  17.     <button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button>
  18.     <!-- 传入事件 -->
  19.     <button @click="handleClick4($event)">点我4(带事件参数)</button>
  20. </div>
  22. </body>
  23. <script>
  24.     let vm = new Vue({
  25.         el: '#box',
  26.         data: {
  28.         },
  29.         methods: {
  30.             handleClick1() {
  31.                 console.log('点我1')
  32.             },
  33.             handleClick2() {
  34.                 console.log('点我2')
  35.             },
  36.             handleClick3(a,b,c) {
  37.                 console.log(a,b,c)
  38.             },
  39.             handleClick4(event) {
  40.                 console.log(event)
  41.             },
  42.         }
  43.     })
  44. </script>
  45. </html>

008i3skNgy1gpsvuoolf9g30tm0qqn6k.gif

3.属性指令

指令 释义
v-bind 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐）

v-bind:class=’js变量’可以缩写成：:class=’js变量’

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>属性指令</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         .red {
  9.             color: rgba(255, 104, 104, 0.7);
  10.         }
  11.         .purple {
  12.             color: rgba(104, 104, 255, 0.7);
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  18. <div id="box">
  19.     <img v-bind:src="url" alt="" height="100">
  20.     <br>
  21.     <button @click="handleClick">点我变色</button>
  22.     <div :class="isActive?'red':'purple'">
  23.         <h1>我是一个div</h1>
  24.     </div>
  25. </div>
  27. </body>
  28. <script>
  29.     let vm = new Vue({
  30.         el: '#box',
  31.         data: {
  32.             url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',
  33.             change: 'red',
  34.             isActive: true
  35.         },
  36.         methods: {
  37.             handleClick() {
  38.                 this.isActive = !this.isActive
  39.             },
  40.         }
  41.     })
  42. </script>
  43. </html>

008i3skNgy1gpsvvdx8ayg30fy0b4acu.gif

三 Style 和 Class

数据的绑定

语法 :属性名=js变量/js语法

  • :class=’js变量、字符串、js数组’

class：三目运算符、数组、对象{red: true}

  • :style=’js变量、字符串、js数组’

style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Style 和 Class</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         .red {
  9.             color: rgba(255, 104, 104, 0.7);
  10.         }
  11.         .font-20 {
  12.             font-size: 20px;
  13.         }
  14.         .be-bold {
  15.             font-weight: bold;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  21. <div id="box">
  22.     <p>我是一个普通的p标签</p>
  23.     <div :class="class_obj">
  24.         <p>我是一个不普通的p标签1</p>
  25.     </div>
  27.     <button @click="handleClick">点击放大字体</button>
  28.     <div :style="style_obj">
  29.         <p>我是一个不普通的p标签2</p>
  30.     </div>
  31. </div>
  33. </body>
  34. <script>
  35.     let vm = new Vue({
  36.         el: '#box',
  37.         data: {
  38.             // class_obj: 'red',    // 放1个是字符串
  39.             class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组
  40.             // class_obj: { red:true, be-bold:false},    // 也可以放对象
  41.             // 数组.push()   从尾部添加1个元素
  42.             // 数组.pop()    删除最后1个元素 并返回
  44.             // 对象的写法
  45.             style_obj: {
  46.                 color: 'red',
  47.                 fontSize: '20px'
  48.             }
  49.             // style_obj: [{background:'red'}, {fontSize:'20px'}]
  51.         },
  52.         methods: {
  53.             handleClick(){
  54.                 this.style_obj['fontSize']='30px'
  55.             }
  56.         }
  58.     })
  59. </script>
  60. </html>

下方试验的命令
  1. vm.class_obj.pop()
  2. vm.class_obj.pop()
  3. vm.class_obj.pop()
  4. vm.class_obj.push('be-bold')
  5. vm.class_obj.push('red')
  6. vm.class_obj.push('font-20')

008i3skNgy1gpsvy66iwbg30ra0vk45y.gif

四 条件渲染

指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>if、else if、else</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <h3>案例：if、else if、else</h3>
  11.     <h2 v-if="type==='1'">A</h2>
  12.     <h2 v-else-if="type==='2'">B</h2>
  13.     <h2 v-else>C</h2>
  14. </div>
  15. </body>
  16. <script>
  17.     let vm = new Vue({
  18.         el: '#box',
  19.         data: {
  20.             type: '1',
  21.         }
  22.     })
  23. </script>
  24. </html>

008i3skNgy1gpsvyoakbng30sk0nsab7.gif

五 列表渲染

1. v-if+v-for+v-else控制购物车商品的显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-if + v-for + v-else控制购物车商品的显示</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         table, td {
  9.             border: 1px solid black;
  10.             text-align: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div id="box">
  16.     <h2>我的购物车</h2>
  17.     <button @click="show">刷新购物车</button>
  18.     <br><br>
  19.     <table v-if="!shopping_car.length==0">
  20.         <tr>
  21.             <td>商品名称</td>
  22.             <td>价格</td>
  23.         </tr>
  24.         <tr v-for="item in shopping_car">
  25.             <td>{{item.name}}</td>
  26.             <td>{{item.price}}</td>
  27.         </tr>
  28.     </table>
  29.     <table v-else>
  30.         <tr>
  31.             <td>商品名称</td>
  32.             <td>价格</td>
  33.         </tr>
  34.         <tr>
  35.             <td>暂无信息</td>
  36.             <td>暂无信息</td>
  37.         </tr>
  38.     </table>
  39. </div>
  40. </body>
  41. <script>
  42.     let vm = new Vue({
  43.         el: '#box',
  44.         data: {
  45.             isActive: false,
  46.             shopping_car: []
  47.         },
  48.         methods: {
  49.             show() {
  50.                 this.shopping_car = [
  51.                     {name: 'Threadripper 3990X', price: '29999元'},
  52.                     {name: 'NVIDIA RTX 8000', price: '59999元'},
  53.                     {name: 'ROG ZENITH II EXTREME', price: '9999元'},
  54.                 ]
  55.             }
  56.         }
  57.     })
  58. </script>
  59. </html>

008i3skNgy1gpsvzcr9peg30ra0igmyc.gif

2. v-for遍历数组(列表)、对象(字典)、数字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-for遍历数组(列表)、对象(字典)</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         table, td {
  9.             border: 1px solid black;
  10.             text-align: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  16. <div id="box">
  17.     <h2>数组（列表）for循环遍历</h2>
  18.     <ul>
  19.         <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
  20.     </ul>
  22.     <h2>对象（字典）for循环遍历</h2>
  23.     <ul>
  24.         <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
  25.     </ul>
  27.     <h2>数组（列表）套对象（字典）for循环遍历</h2>
  28.     <table>
  29.         <tr>
  30.             <td>姓名</td>
  31.             <td>年龄</td>
  32.             <td>性别</td>
  33.             <td>国籍</td>
  34.         </tr>
  35.         <tr v-for="info in summary_test">
  36.             <td>{{info.name}}</td>
  37.             <td>{{info.age}}</td>
  38.             <td>{{info.gender}}</td>
  39.             <td>{{info.country}}</td>
  40.         </tr>
  41.     </table>
  42. </div>
  43. </body>
  44. <script>
  45.     let vm = new Vue({
  46.         el: '#box',
  47.         data: {
  48.             list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
  49.             dic_test:{name: 'Darker', age: 18, gender: 'male'},
  50.             summary_test: [
  51.                     {name: 'Alan', age: 23, gender: 'male', country: 'America'},
  52.                     {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
  53.                     {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
  54.                     {name: 'Darker', age: 18, gender: 'male', country: 'China'},
  55.                     {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
  56.                 ]
  57.         }
  58.     })
  59. </script>
  60. </html>

02 Vue基础 - 图12

注意！在Vue中：

  • 数组的index和value是反的
  • 对象的key和value也是反的

3. key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

  • 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
  • 页面更新之后，会加速DOM的替换（渲染）
  • :key="变量"

    4. 数组更新与检测

可以检测到变动的数组操作：

push：最后位置添加 pop：最后位置删除 shift：第一个位置删除 unshift：第一个位置添加 splice：切片 sort：排序 reverse：反转

检测不到变动的数组操作：

filter()：过滤 concat()：追加另一个数组 slice()： map()： 原因： 作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决方法：
  1. // 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
  2. vm.arrayList[0]
  3. "Alan"
  4. vm.arrayList[0]='Darker'
  5. "Darker"
  7. // 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
  8. Vue.set(vm.arrayList, 0, 'Darker')

六 事件处理

事件 释义
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件

change 和 blur 最本质的区别： 如果输入框为空，失去焦点后，change不会触发，但是blur会触发

1.过滤案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>过滤案例</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p>
  11. <!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容："></p> -->
  12. <!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容："></p> -->
  13.     <ul>
  14.         <li v-for="data in newList">{{data}}</li>
  15.     </ul>
  16. </div>
  17. </body>
  18. <script>
  19.     var vm = new Vue({
  20.         el: '#box',
  21.         data: {
  22.             myText: '',
  23.             dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
  24.             newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
  25.         },
  26.         methods: {
  27.             handleInput() {
  28.                 this.newList = this.dataList.filter(item => {
  29.                     // item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引
  30.                     return item.indexOf(this.myText) > -1   // 返回索引大于1的元素：>-1 就表示包含在其中
  31.                 })
  32.             },
  33.         },
  34.     })
  35. </script>
  36. </html>

008i3skNgy1gpsw37uasgg30py0bumzc.gif

2.事件修饰符

事件修饰符 释义
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件修饰符</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10. <!--    <ul @click="handleUl">-->
  11.     <ul @click.self="handleUl">
  12. <!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
  13.         <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
  14.         <li><a href="http://www.baidu.com">不拦截</a></li>
  15.         <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li>
  16.         <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
  17.         <li><button @click.once="test">只执行一次</button></li>
  18.     </ul>
  19. </div>
  20. </body>
  21. <script>
  22.     var vm = new Vue({
  23.         el: '#box',
  24.         data: {
  25.             dataList: ['1','22','333','4444']
  26.         },
  27.         methods: {
  28.             handleUl(ev){
  29.                 console.log('ul被点击了')
  30.             },
  31.             handleLi(){
  32.                 console.log('li被点击了')
  33.                 ev.stopPropagation()    // 点击事件停止 冒泡（向父组件传递时间）
  34.             },
  35.             handleLink(ev){
  36.                 ev.preventDefault()
  37.             },
  38.             test(){
  39.                 alert('只触发1次')
  40.             }
  41.         }
  42.     })
  43. </script>
  44. </html>

事件冒泡
008i3skNgy1gpsw7aubxwg30t80kqmys.gif

阻止事件冒泡
**

008i3skNgy1gpsw7w77ueg30t80kq767.gif

阻止链接跳转+只执行1次
008i3skNgy1gpsw8miomug31mo0emwts.gif

3.按键修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>按键修饰符</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <!--    <input type="text" v-model="myInput" @keyup="handleKey">-->
  11.     <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
  12.     <input type="text" @keyup="handleKey1">
  13.     <input type="text" @keyup.enter="handleKey2">
  14. </div>
  15. </body>
  16. <script>
  17.     var vm = new Vue({
  18.         el: '#box',
  19.         data: {
  20.             dataList: ['1', '22', '333', '4444']
  21.         },
  22.         methods: {
  23.             handleKey1(ev) {
  24.                 console.log('按下了' + ev)
  25.                 // if (ev.keyCode==13){
  26.                 //     console.log('回车键被按下了')
  27.                 // }
  28.             },
  29.             handleKey2(ev) {
  30.                 console.log('按下了回车键')
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </html>

008i3skNgy1gpsw8x68jdg316y0h8myx.gif

七 数据双向绑定

v-model的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <input type="text" v-model="myText" placeholder="请输入内容">
  11.     您输入的内容是：{{myText}}
  12. </div>
  13. </body>
  14. <script>
  15.     var vm = new Vue({
  16.         el: '#box',
  17.         data: {
  18.             myText: '',
  19.         },
  20.     })
  21. </script>
  22. </html>

008i3skNgy1gpsw98h61tg316y02owfw.gif

八 表单控制

1.checkbox选中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>checkbox</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <input type="text" placeholder="请输入用户名："><br>
  11.     <input type="password" placeholder="请输入密码："><br>
  12.     <input type="checkbox" v-model="radio">记住用户名
  13. </div>
  14. </body>
  15. <script>
  16.     var vm = new Vue({
  17.         el: '#box',
  18.         data: {
  19.             myText: '',
  20.             textBig: '',
  21.             radio: false,
  22.         },
  23.     })
  24. </script>
  25. </html>

008i3skNgy1gpsw9lxewhg316y0h8tae.gif

2.单选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>单选</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <input type="radio" v-model="radio" value="男">男
  11.     <input type="radio" v-model="radio" value="女">女
  12.     <input type="radio" v-model="radio" value="保密">保密
  13.     <br><br>您选择的性别：{{radio}}
  14. </div>
  15. </body>
  16. <script>
  17.     var vm = new Vue({
  18.         el: '#box',
  19.         data: {
  20.             radio: '',
  21.         },
  23.     })
  24. </script>

008i3skNgy1gpsw9wr585g30nu05ymy7.gif

3.多选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>多选</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  11.     <input type="checkbox" v-model="many" value="篮球">篮球
  12.     <input type="checkbox" v-model="many" value="足球">足球
  13.     <input type="checkbox" v-model="many" value="棒球">棒球
  14.     <input type="checkbox" v-model="many" value="桌球">桌球
  15.     <br><br>您喜欢的球类：{{many}}
  16. </div>
  17. </body>
  18. <script>
  19.     var vm = new Vue({
  20.         el: '#box',
  21.         data: {
  22.             many: [],
  23.         },
  24.     })
  25. </script>
  26. </html>

008i3skNgy1gpswa73mmmg30nu05y0up.gif

4.购物车案例 - 结算

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车结算</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         table, td {
  9.             border: 1px solid black;
  10.             text-align: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div id="box">
  16.     <table>
  17.         <tr>
  18.             <td>商品名称</td>
  19.             <td>价格</td>
  20.             <td>数量</td>
  21.             <td>选择</td>
  22.         </tr>
  23.         <tr v-for="item in dataList">
  24.             <td>{{item.name}}</td>
  25.             <td>{{item.price}}</td>
  26.             <td>{{item.number}}</td>
  27.             <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
  28.         </tr>
  29.     </table>
  30.     <br>已选商品：{{checkGroup}}
  31.     <br>总价：{{getPrice()}}
  32. </div>
  33. </body>
  34. <script>
  35.     var vm = new Vue({
  36.         el: '#box',
  37.         data: {
  38.             dataList: [
  39.                 {name: '今瓶没', price: 99, number: 2},
  40.                 {name: '西柚记', price: 59, number: 1},
  41.                 {name: '水壶转', price: 89, number: 5},
  42.             ],
  43.             checkGroup: [],
  44.         },
  45.         methods: {
  46.             getPrice() {
  47.                 let sum_price = 0
  48.                 for (i in this.checkGroup) {    // 这里的 i 是索引
  49.                     sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
  50.                 }
  51.                 return sum_price
  52.             }
  53.         }
  54.     })
  55. </script>
  56. </html>

008i3skNgy1gpswal7drig31xy0bo77q.gif

5.购物车案例 - 全选/全不选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全选/全不选</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <style>
  8.         table, td {
  9.             border: 1px solid black;
  10.             text-align: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div id="box">
  16.     <table>
  17.         <tr>
  18.             <td>商品名称</td>
  19.             <td>价格</td>
  20.             <td>数量</td>
  21.             <td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
  22.         </tr>
  23.         <tr v-for="item in dataList">
  24.             <td>{{item.name}}</td>
  25.             <td>{{item.price}}</td>
  26.             <td>{{item.number}}</td>
  27.             <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
  28.         </tr>
  29.     </table>
  30.     <br>已选商品：{{checkGroup}}
  31.     <br>总价：{{getPrice()}}
  32. </div>
  33. </body>
  34. <script>
  35.     var vm = new Vue({
  36.         el: '#box',
  37.         data: {
  38.             dataList: [
  39.                 {name: '今瓶没', price: 99, number: 2},
  40.                 {name: '西柚记', price: 59, number: 1},
  41.                 {name: '水壶转', price: 89, number: 5},
  42.             ],
  43.             checkGroup: [],
  44.             allChecked: false,
  45.         },
  46.         methods: {
  47.             getPrice() {
  48.                 let sum_price = 0
  49.                 for (i in this.checkGroup) {    // 这里的 i 是索引
  50.                     sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
  51.                 }
  52.                 return sum_price
  53.             },
  54.             checkAll() {
  55.                 if (this.checkGroup.length > 0) {
  56.                     this.checkGroup = []
  57.                 } else {
  58.                     this.checkGroup = this.dataList
  59.                 }
  60.             },
  61.             checkOne() {
  62.                 // if (this.checkGroup.length === this.dataList.length) {
  63.                 //     this.allChecked = true
  64.                 // } else {
  65.                 //     this.allChecked = false
  66.                 // }
  67.                 this.allChecked = this.checkGroup.length === this.dataList.length;
  68.             }
  69.         }
  70.     })
  71. </script>
  72. </html>

008i3skNgy1gpswayafpkg31xy0bo0wx.gif

6.购物车案例 - 数量加减

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>控制加减</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
  8. </head>
  9. <body>
  10. <div class="row">
  11.     <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
  12.         <table class="table table-bordered">
  13.             <thead>
  14.             <tr>
  15.                 <th scope="col">商品名称</th>
  16.                 <th scope="col">单价</th>
  17.                 <th scope="col">数量</th>
  18.                 <th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th>
  19.             </tr>
  20.             </thead>
  21.             <tbody>
  22.             <tr v-for="item in dataList">
  23.                 <td>{{item.name}}</td>
  24.                 <td>{{item.price}}</td>
  25.                 <td>
  26.                     <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
  27.                     {{item.number}}
  28.                     <button class="btn link btn-sm" @click="item.number++">+</button>
  29.                 </td>
  30.                 <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
  31.             </tr>
  32.             <tr class="text-left">
  33.                 <td colspan="4">总价：{{getPrice()}}
  34.             </tr>
  35.             </tbody>
  36.         </table>
  37.     </div>
  38. </div>
  39. </body>
  40. <script>
  41.     var vm = new Vue({
  42.         el: '#box',
  43.         data: {
  44.             dataList: [
  45.                 {name: '今瓶没', price: 99, number: 1},
  46.                 {name: '西柚记', price: 59, number: 1},
  47.                 {name: '水壶转', price: 89, number: 1},
  48.             ],
  49.             checkGroup: [],
  50.             allChecked: false,
  51.         },
  52.         methods: {
  53.             getPrice() {
  54.                 let sum_price = 0
  55.                 for (i in this.checkGroup) {
  56.                     sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
  57.                 }
  58.                 return sum_price
  59.             },
  60.             checkAll() {
  61.                 if (this.checkGroup.length > 0) {
  62.                     this.checkGroup = []
  63.                 } else {
  64.                     this.checkGroup = this.dataList
  65.                 }
  66.             },
  67.             checkOne() {
  68.                 // if (this.checkGroup.length === this.dataList.length) {
  69.                 //     this.allChecked = true
  70.                 // } else {
  71.                 //     this.allChecked = false
  72.                 // }
  73.                 this.allChecked = this.checkGroup.length === this.dataList.length;
  74.             },
  75.             reduceNum(item) {
  76.                 if (item.number === 1) {
  77.                     item.number = 1
  78.                 } else {
  79.                     item.number--
  80.                 }
  81.             }
  82.         }
  83.     })
  84. </script>
  85. </html>

008i3skNgy1gpswbabzdtg30zc0g278i.gif

九 v-model进阶

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化 number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留

trim：去除首位的空格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-model 之 lazy、number、trim</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
  11.     <br>
  12.     <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
  13.     <br>
  14.     <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
  15.     <br>
  16.     <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
  17. </div>
  18. </body>
  19. <script>
  20.     var vm = new Vue({
  21.         el: '#box',
  22.         data: {
  23.             myText1: '',
  24.             myText2: '',
  25.             myText3: '',
  26.             myText4: '',
  27.         },
  28.     })
  29. </script>
  30. </html>

008i3skNgy1gpswbu1jbvg30oi05qadp.gif