目录

  • 一、 模板语法
    • 插值语法
  • 二、 指令
    • 2.1 文本指令
      • v-html：让HTML渲染成页面
      • v-text：标签内容显示js变量对应的值
      • v-show：显示/隐藏内容
      • v-if：显示/删除内容
    • 2.2 事件指令
      • v-on:click 可以缩写成@click
    • 2.3 属性指令
      • v-bind:class=’js变量’可以缩写成：:class=’js变量’
  • 三、 Style 和 Class
    • 数据的绑定
    • 下方试验的命令
  • 四、 条件渲染 v-if
  • 五、 列表渲染
    • 5.1 v-if + v-for + v-else控制购物车商品的显示
    • 5.2 v-for遍历数组(列表)、对象(字典)、数字
    • 5.3 key值的解释
    • 5.4 数组更新与检测
      • 可以检测到变动的数组操作：
      • 检测不到变动的数组操作：
      • 解决方法：
  • 六、 事件处理
    • 6.1 过滤案例
    • 6.2 事件修饰符
    • 6.3 按键修饰符
  • 七、 数据双向绑定
    • 7.1 v-model的使用
    • 7.2 v-model进阶
      • v-model 之 lazy、number、trim
  • 八、 表单控制
    • 1.checkbox选中
    • 2.单选
    • 3.多选
    • 4.购物车案例 - 结算
    • 5.购物车案例 - 全选/全不选
    • 6.购物车案例 - 数量加减

一、 模板语法

插值语法

{{变量、js语法}}

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

二、 指令

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渲染成页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-html</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><ul><li v-html="link1"></li></ul>
</div></body>
<script>let vm = new Vue({el: '#box', // 在box这个div中可以写 vue的语法data: {link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'}})
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-text</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><ul><li v-text="link1"></li></ul>
</div></body>
<script>let vm = new Vue({el: '#box', // 在box这个div中可以写 vue的语法data: {link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',}})
</script>
</html>

v-show：显示/隐藏内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-show</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><h3>案例：控件通过按钮来控制显示和小事</h3><button @click="handleClick()">点我</button><br><div v-show="isShow">isShow</div>
</div></body>
<script>let vm = new Vue({el: '#box',data: {isShow: true,},methods: {handleClick(){this.isShow = !this.isShow    // this指的是当前的vue对象},}})
</script>
</html>

v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-if</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><h3>案例：控件通过按钮来控制显示和消失</h3><button @click="handleClick()">点我</button><br><div v-if="isCreated">isCreated</div>
</div></body>
<script>let vm = new Vue({el: '#box',data: {isCreated:true},methods: {handleClick(){this.isCreated = !this.isCreated    // this指的是当前的vue对象},}})
</script>
</html>

2.2 事件指令

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件指令</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="box"><button v-on:click="handleClick1">点我1</button><!-- 下面这个用的多 --><button @click="handleClick2">点我2</button><!-- 如果不传参数，是没有区别的 --><button @click="handleClick3()">点我3-1(带括号)</button><!-- 如果要传参数 --><button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button><!-- 传入事件 --><button @click="handleClick4($event)">点我4(带事件参数)</button>
</div></body>
<script>let vm = new Vue({el: '#box',data: {},methods: {handleClick1() {console.log('点我1')},handleClick2() {console.log('点我2')},handleClick3(a,b,c) {console.log(a,b,c)},handleClick4(event) {console.log(event)},}})
</script>
</html>

2.3 属性指令

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性指令</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>.red {color: rgba(255, 104, 104, 0.7);}.purple {color: rgba(104, 104, 255, 0.7);}</style>
</head>
<body><div id="box"><img v-bind:src="url" alt="" height="100"><br><button @click="handleClick">点我变色</button><div :class="isActive?'red':'purple'"><h1>我是一个div</h1></div>
</div></body>
<script>let vm = new Vue({el: '#box',data: {url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',change: 'red',isActive: true},methods: {handleClick() {this.isActive = !this.isActive},}})
</script>
</html>

三、 Style 和 Class

数据的绑定

语法:属性名=js变量/js语法:class=’js变量、字符串、js数组、三目运算符、数组、对象{red: true}’class_obj: 'div_cls_red', //字符串class_obj: ['div_cls_red'], //数组 ---用的多class_obj: {div_cls_red: true}, //对象:style=’js变量、字符串、js数组、三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}’style_obj: 'background: green'// 字符串style_obj: [{background:'red'},] //数组，原来的css样式的-  全都使用驼峰替换style_obj: {background:'yellow'} //原来的css样式的-  全都使用驼峰替换  ---用的多

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Style 和 Class</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>.red {color: rgba(255, 104, 104, 0.7);}.font-20 {font-size: 20px;}.be-bold {font-weight: bold;}</style>
</head>
<body><div id="box"><p>我是一个普通的p标签</p><div :class="class_obj"><p>我是一个不普通的p标签1</p></div><button @click="handleClick">点击放大字体</button><div :style="style_obj"><p>我是一个不普通的p标签2</p></div>
</div></body>
<script>let vm = new Vue({el: '#box',data: {// class_obj: 'red',    // 放1个是字符串class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组// class_obj: { red:true, be-bold:false},    // 也可以放对象// 数组.push()   从尾部添加1个元素// 数组.pop()    删除最后1个元素 并返回// 对象的写法style_obj: {color: 'red',fontSize: '20px'}// style_obj: [{background:'red'}, {fontSize:'20px'}]},methods: {handleClick(){this.style_obj['fontSize']='30px'}}})
</script>
</html>

下方试验的命令

vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')

四、 条件渲染 v-if

指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if、else if、else</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><h3>案例：if、else if、else</h3><h2 v-if="type==='1'">A</h2><h2 v-else-if="type==='2'">B</h2><h2 v-else>C</h2>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {type: '1',}})
</script>
</html>

五、 列表渲染

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-if + v-for + v-else控制购物车商品的显示</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body>
<div id="box"><h2>我的购物车</h2><button @click="show">刷新购物车</button><br><br><table v-if="!shopping_car.length==0"><tr><td>商品名称</td><td>价格</td></tr><tr v-for="item in shopping_car"><td>{{item.name}}</td><td>{{item.price}}</td></tr></table><table v-else><tr><td>商品名称</td><td>价格</td></tr><tr><td>暂无信息</td><td>暂无信息</td></tr></table>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {isActive: false,shopping_car: []},methods: {show() {this.shopping_car = [{name: 'Threadripper 3990X', price: '29999元'},{name: 'NVIDIA RTX 8000', price: '59999元'},{name: 'ROG ZENITH II EXTREME', price: '9999元'},]}}})
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for遍历数组(列表)、对象(字典)</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body><div id="box"><h2>数组（列表）for循环遍历</h2><ul><li v-for="(value,index) in list_test">{{index}} —— {{value}}</li></ul><h2>对象（字典）for循环遍历</h2><ul><li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li></ul><h2>数组（列表）套对象（字典）for循环遍历</h2><table><tr><td>姓名</td><td>年龄</td><td>性别</td><td>国籍</td></tr><tr v-for="info in summary_test"><td>{{info.name}}</td><td>{{info.age}}</td><td>{{info.gender}}</td><td>{{info.country}}</td></tr></table>
</div>
</body>
<script>let vm = new Vue({el: '#box',data: {list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],dic_test:{name: 'Darker', age: 18, gender: 'male'},summary_test: [{name: 'Alan', age: 23, gender: 'male', country: 'America'},{name: 'Ben', age: 15, gender: 'male', country: 'Australia'},{name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},{name: 'Darker', age: 18, gender: 'male', country: 'China'},{name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},]}})
</script>
</html>

注意！在Vue中：

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

5.3 key值的解释

vue中涉及到循环，通常能看到， :key="item"<p v-for="item in 4" :key="item"><h3>{{ item }}</h3></p>

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

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

5.4 数组更新与检测

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

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

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

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

解决方法：

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

六、 事件处理

事件 释义
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件 
change 和 blur 最本质的区别：如果输入框为空，失去焦点后，change不会触发，但是blur会触发

6.1 过滤案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤案例</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p>
<!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容："></p> -->
<!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容："></p> --><ul><li v-for="data in newList">{{data}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],},methods: {handleInput() {// this.dataList.filter(function (item){ }) this.newList = this.dataList.filter(item => {// item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引return item.indexOf(this.myText) > -1   // 返回索引大于1的元素：>-1 就表示包含在其中})},},})
</script>
</html>

6.2 事件修饰符

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

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--    <ul @click="handleUl">--><ul @click.self="handleUl">
<!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>--><li v-for="data in dataList" @click.stop="handleLi">{{data}}</li><li><a href="http://www.baidu.com">不拦截</a></li><li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li><li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li><li><button @click.once="test">只执行一次</button></li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: ['1','22','333','4444']},methods: {handleUl(ev){console.log('ul被点击了')},handleLi(){console.log('li被点击了')ev.stopPropagation()    // 点击事件停止 冒泡（向父组件传递时间）},handleLink(ev){ev.preventDefault()},test(){alert('只触发1次')}}})
</script>
</html>

事件冒泡

阻止事件冒泡

阻止链接跳转+只执行1次

6.3 按键修饰符

@keyup
@keyup.enter

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按键修饰符</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><!--    <input type="text" v-model="myInput" @keyup="handleKey">--><!--    <input type="text" v-model="myInput" @keyup.13="handleKey">--><input type="text" @keyup="handleKey1"><input type="text" @keyup.enter="handleKey2">
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: ['1', '22', '333', '4444']},methods: {handleKey1(ev) {console.log('按下了' + ev)// if (ev.keyCode==13){//     console.log('回车键被按下了')// }},handleKey2(ev) {console.log('按下了回车键')}}})
</script>
</html>

七、 数据双向绑定

7.1 v-model的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="text" v-model="myText" placeholder="请输入内容">您输入的内容是：{{myText}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',},})
</script>
</html>

7.2 v-model进阶

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定失去焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首尾的空格

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-model 之 lazy、number、trim</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="text" v-model="myText1" placeholder="normal"> {{myText1}}<br><input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}<br><input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}<br><input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText1: '',myText2: '',myText3: '',myText4: '',},})
</script>
</html>

八、 表单控制

1.checkbox选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>checkbox</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="text" placeholder="请输入用户名："><br><input type="password" placeholder="请输入密码："><br><input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText: '',textBig: '',radio: false,},})
</script>
</html>

2.单选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="radio" v-model="radio" value="男">男<input type="radio" v-model="radio" value="女">女<input type="radio" v-model="radio" value="保密">保密<br><br>您选择的性别：{{radio}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {radio: '',},})
</script>
</html>

3.多选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box"><input type="checkbox" v-model="many" value="篮球">篮球<input type="checkbox" v-model="many" value="足球">足球<input type="checkbox" v-model="many" value="棒球">棒球<input type="checkbox" v-model="many" value="桌球">桌球<br><br>您喜欢的球类：{{many}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {many: [],},})
</script>
</html>

4.购物车案例 - 结算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车结算</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body>
<div id="box"><table><tr><td>商品名称</td><td>价格</td><td>数量</td><td>选择</td></tr><tr v-for="item in dataList"><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.number}}</td><td><input type="checkbox" :value="item" v-model="checkGroup"></td></tr></table><br>已选商品：{{checkGroup}}<br>总价：{{getPrice()}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: [{name: '今瓶没', price: 99, number: 2},{name: '西柚记', price: 59, number: 1},{name: '水壶转', price: 89, number: 5},],checkGroup: [],},methods: {getPrice() {let sum_price = 0for (i in this.checkGroup) {    // 这里的 i 是索引sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price}}})
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全选/全不选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><style>table, td {border: 1px solid black;text-align: center;}</style>
</head>
<body>
<div id="box"><table><tr><td>商品名称</td><td>价格</td><td>数量</td><td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td></tr><tr v-for="item in dataList"><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.number}}</td><td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td></tr></table><br>已选商品：{{checkGroup}}<br>总价：{{getPrice()}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: [{name: '今瓶没', price: 99, number: 2},{name: '西柚记', price: 59, number: 1},{name: '水壶转', price: 89, number: 5},],checkGroup: [],allChecked: false,},methods: {getPrice() {let sum_price = 0for (i in this.checkGroup) {    // 这里的 i 是索引sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price},checkAll() {if (this.checkGroup.length > 0) {this.checkGroup = []} else {this.checkGroup = this.dataList}},checkOne() {// if (this.checkGroup.length === this.dataList.length) {//     this.allChecked = true// } else {//     this.allChecked = false// }this.allChecked = this.checkGroup.length === this.dataList.length;}}})
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制加减</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row"><div id="box" class="col-md-4 offset-md-1 text-center mt-5 "><table class="table table-bordered"><thead><tr><th scope="col">商品名称</th><th scope="col">单价</th><th scope="col">数量</th><th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th></tr></thead><tbody><tr v-for="item in dataList"><td>{{item.name}}</td><td>{{item.price}}</td><td><button class="btn link btn-sm" @click="reduceNum(item)">-</button>{{item.number}}<button class="btn link btn-sm" @click="item.number++">+</button></td><td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td></tr><tr class="text-left"><td colspan="4">总价：{{getPrice()}}</tr></tbody></table></div>
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {dataList: [{name: '今瓶没', price: 99, number: 1},{name: '西柚记', price: 59, number: 1},{name: '水壶转', price: 89, number: 1},],checkGroup: [],allChecked: false,},methods: {getPrice() {let sum_price = 0for (i in this.checkGroup) {sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price},checkAll() {if (this.checkGroup.length > 0) {this.checkGroup = []} else {this.checkGroup = this.dataList}},checkOne() {// if (this.checkGroup.length === this.dataList.length) {//     this.allChecked = true// } else {//     this.allChecked = false// }this.allChecked = this.checkGroup.length === this.dataList.length;},reduceNum(item) {if (item.number === 1) {item.number = 1} else {item.number--}}}})
</script>
</html>

前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制相关推荐

  1. vue v-model 双向绑定表单元素的数据：实质是绑定了value、checked、selected属性

    用法: 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的方法 ...

  2. Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

    目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...

  3. Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）

    1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...

  4. 用vue语法写html,Vue -- 模板语法

    Vue 模板语法 1.vue 和大多数后台语言,甚至是和art-template 这种前端模板库一样,都有一套,特定的语法来把数据渲染在html上. Mustache -- 大胡子语法 1.大胡子的语 ...

  5. Vue框架---Vue模板语法（二）

    样式绑定 1.class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 <div id="ad& ...

  6. Vue模板语法的缩写是什么？

    Vue模板语法缩写是VTL(View Template Language),这是一种用于构建用户界面的声明式编程语言.它基于HTML,但具有更强大的数据绑定功能.下面是一些VTL的例子: 绑定文本: ...

  7. 2.VUE模板语法，属性，样式，事件绑定，事件修饰符

    一.概述 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.     Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染 ...

  8. Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）

    文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...

  9. 01 【Vue简介 初识Vue 模板语法和数据绑定】

    1.Vue简介 1.1官网 英文官网 中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...

最新文章

  1. 推荐一些软件，平时工作中可能会用到【不断更新】
  2. Opencv+Windows+Codeblocks+C++安装笔记，花了三天终于在公司各种限制条件下成功打开图片
  3. (JAVA学习笔记) 类的继承，super，方法的重写，多态
  4. PyTorch基础（四）-----数据加载和预处理
  5. 删除临时表并且插入数据
  6. CentOS 7安装zabbix-2.4.8监控
  7. 基于Web Services建立Asp与Asp.Net之间Session数据桥的应用研究
  8. oracle大于或等于,如何用SQL实现最接近某一个值且大于等于这个值的一条记录
  9. : 字符向量未正常终止_文本挖掘从小白到精通（一）---语料、向量空间和模型的概念...
  10. docker技术之基本命令
  11. 16进制转base64_《蹲坑学K8S》之19-5：二进制部署Calico网络
  12. ubuntu软件中心打不开Python error
  13. 8086的两种工作模式_在线式UPS工作模式
  14. Java-斗地主小游戏洗牌发牌(控制台程序)
  15. 容斥原理+简单博弈论（找个时间补充一下sg，希望我记得）
  16. 关闭微软cortana
  17. EMAC和GMAC区别
  18. Stata命令xtreg求残差
  19. linssh2 sftp读取远端目录，获取远端文件或者目录信息
  20. 基础攻防实验-DVWA-秋潮-网络配置

热门文章

  1. 雷鸟邮件--exchange server
  2. 精选Android中高级面试题 -- 终局之篇：高级干货
  3. MFC EDIT的使用———自动滚屏
  4. 先做奴才，后做天才！——人生策划三法则
  5. 2010年度最佳iphone游戏排行榜
  6. 小酒坊酿白酒不知道怎么售卖？质检报告和SC生产许可不知道怎么办理？
  7. 此订阅号已开通留言功能
  8. 黑客口中的肉鸡是什么?
  9. echartjs 实现 cross （十星辅助线）跟随吸附高亮点
  10. 各类奖学金、各种称号、各种职位中英文对照(个人简历用得上)