张三:{{number+1}}
运行输出60
二、指令
指的是带有“v-”前缀的特殊属性
核心指令:(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show false:将元素隐藏,但是控制台会显示(display:none)
v-if false:将元素隐藏,但是控制台不显示
v-for:类似JS的遍历
具体实现
v-if|v-else|v-else-if
分数:
v-show
v-show与v-if的区别?
当分数大于九十,两者都出现
当分数小于九十,v-show由js代码(display)隐藏,v-if html代码不存在
v-for的用法
v-if|v-else|v-else-if
分数:
v-show
v-for
{{h.name}}爱好将根据输入框输入的内容改变
checkbox复选框的写法
{{h.name}}
v-on的用法
v-on
触发事件
<button @click=“handle”>触发事件hhh
methods: {
handle() {
alert(“触发事件”)
}
}
两个写法的按钮都可以触发事件
三、动态参数
从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令的参数
可以使用动态参数为一个动态的事件名绑定处理函数
例如:<a v-on:[evname]=“doSomething”> …
注意:动态参数表达式有一些语法约束,evName无效,evname有效,回避大写
双击触发事件:dblclick
动态参数
<button v-on:[evname]=“handle”>动态参数
new Vue({
el: ‘#app’,
data() {
return {
evname: ‘dblclick’
}
},
methods: {
handle() {
alert(“触发事件”)
}
}
})
页面效果:点击两下时弹出弹窗
四、过滤器
=====
1.全局过滤器
Vue.filter(‘filterName’, function (value) {
// value 表示要过滤的内容
});
2.局部过滤器
new Vue({
filters:{‘filterName’:function(value){}}
});
过滤器函数接受表达式的值作为第一个参数
{{msg|all}},
{{msg|single}},
{{msg|all|single}}
运行结果如下,全局过滤器和局部过滤器的使用互不影响
过滤器可以串联,如{{msg|all|single}}中全局局部同时使用时,局部过滤器过滤的是全局过滤器截取的内容
过滤器是JavaScript函数,因此可以接受参数
{{msg|param(2,4)}}
‘param’:function(val,start,end){
return val.substring(1,4);
}
五、计算属性
通过变量算出来的属性叫计算属性
计算属性是没有在变量中定义的
计算属性