vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods

最新推荐文章于 2023-06-19 08:30:00 发布

别狗了

最新推荐文章于 2023-06-19 08:30:00 发布

阅读量991

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43010586/article/details/104401830

版权

```css
<html>
	<head></head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
		<!-- 
		es6里如果属性值是变量，并且这个变量名和属性名一样的话，
			那么属性名和属性值可以简写，对象里函数的属性也可以缩写，
			默认把：function一同省略 fn(){
   } 这样
		v-model 双向绑定 仅仅针对于表单元素
			checkbox:
				单个复选框绑定到布尔值
				多个复选框的话就是，绑定到数组（要写value,value写死）
			radio：
				单选框直接绑定到值
			select:
				下拉选择框直接绑定到值
			修饰符：.number --自动把输入的转换为数字 v-model.number=""
					.trim --去首位空格 v-model.trim=""
		v-on 绑定事件(注意this) 缩写为@事件名 @click="fn"
			阻止事件冒泡(prevent)：v-on:click.prevent=""
			按键修饰符：v-on:keyup.enter="" --回车松开触发事件
						v-on:keyup.page-down="" --向下翻页按键触发事件
		computed:计算属性 比如this.box.splite("")这种，要对属性进行处理，
				就放在computed里面，写成方法,然后再{
   {
   }}里写函数名字
		computed与methods区别：
				计算属性时，只用它依赖的值发生变化的时候才会触发，
				就是数值变了，方法自行处理这些东西不需要调用，
				而methods里面的函数需要调用
				computed计算属性性能更高，methods是主动调用，两者不冲突
				记得在computed里面加return
		watch:检测数据（监听）,改变其中一个属性值，就会触发里面的方法（不常用）
		computed与watch

最低0.47元/天解锁文章

别狗了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods

<html> <head></head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body> <div id="app"> <div v-ht...
复制链接

扫一扫