学习vue中的computed计算属性,v-model的一些特殊用法还有watch监听器
今日代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day02</title>
<!-- @keyup.enter 键盘回车监听-->
<!-- v-model.trim 去除首尾空格 -->
<!-- v-model.num 转数字 -->
<!-- @事件名.stop 阻止冒泡 -->
<!-- @事件名.prevent 阻止默认行为 -->
<!-- 操作class -->
<!--
<div class="box" :class="{类名1: 布尔值, 类名2: 布尔值}"></div> 控制css样式
<div class="box" :class="[类名1 , 类名2]"></div>
-->
<!-- 操作style -->
<!--
<div class="box" :style="{CSS属性名1: CSS属性值,CSS属性名2:CSS属性名2}"></div>
-->
<!-- 计算属性算出来会存入缓存,如果依赖项没改变就直接读缓存,性能高 -->
<!-- watch监听器 -->
<!-- 简单写法
watch:{
//该方法会在数据变化时,触发执行
数据属性名(newValue,oldValue){
一些业务逻辑或异步操作
},
'对象.属性名'(newValue,oldValue){
一些业务逻辑或异步操作
},
}
-->
<!-- 完整写法
watch{
数据属性名:{
deep:true, //对对象的所有属性进行监视
immediate:true, //是否立刻执行一次handler
handler(newValue){
console.log(newValue);
}
}
}
-->
</head>
<body>
<div id="bbb">
<h3>@事件名.stop</h3>
<div @click="fatherFn">
<div @click.stop="sonFn">儿子</div>
</div>
<h3>@事件名.prevent</h3>
<a @click.prevent href="https://baidu.com">百度</a>
<select v-model="cityID">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">重庆</option>
</select>
<br>
<span>计算属性{{totalCount}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const bbb=new Vue({
el:'#bbb',
data:{
cityID:1,
list:[
{id: 1, name:"篮球",num:3},
{id: 2, name:"篮球",num:8},
{id: 3, name:"篮球",num:4},
]
},
methods:{
fatherFn(){
alert('father');
},
sonFn(){
alert('son');
}
},
computed:{
totalCount(){
return this.list.reduce((sum,item)=> sum+ item.num,0);
}
},
watch:{
//该方法会在数据变化时,触发执行
// 数据属性名(newValue,oldValue){
// 一些业务逻辑或异步操作
// },
// '对象.属性名'(newValue,oldValue){
// 一些业务逻辑或异步操作
// },
}
})
</script>
</body>
</html>
标签：computed,name,篮球,id,num,2.6,属性 From： https://www.cnblogs.com/daniel350-wang/p/18030307