uniapp数据绑定和事件绑定实例

uniapp数据绑定和事件绑定实例

数据绑定

1. 双向数据绑定（使用v-model指令在表单元素上创建双向数据绑定）

• v-model.trim:去除首尾空格

• v-model.number:输入的字符串转换成number类型。输入框的输入的内容默认是string类型

• v-model.lazy：输入框发生改变并失去焦点。

可以用 v-model 指令在表单 input、textarea 及 select
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<template>
      <view>
	<input v-model="message" placeholder="edit me">
	<text>Message is: {{ message }}</text>
       </view>
</template>

<script>
   export default {
	data() {
		return {
			message:""
			}
		},
	methods: {
			
		}
	}
</script>

2. 对象语法

• 可以传给 v-bind:class 一个对象，实现动态地切换 class。

• 也可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 共存。

<template>
	<view class="content">
		<view class="static" :class="{active:isActive}">111</view>
		<view class="static" :class="{active:isActive,'text-danger':hasError}">222</view>
		<view v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">333</view>
		<navigator url="../array/array.vue">
			<button>数组</button>
		</navigator>
		<navigator url="../computed/computed.vue">
			<button>computed</button>
		</navigator>
		<navigator url="../classObject/classObject.vue">
			<button>非H5不支持</button>
		</navigator>
		<navigator url="../demo/demo.vue">
			<button>实例</button>
		</navigator>
		<button type="primary" @click="changeStyle">改变样式</button>
	</view>
</template>
//当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ，class 列表将变为 static active text-danger
<script>
	export default {
		data() {
			return {
				isActive:true,
				hasError:true,
				activeColor:"green",
				fontSize:50
			}
		},
		onLoad() {

		},
		methods: {
			changeStyle(){
				this.isActive = false
				this.activeColor = 'red'
				this.fontSize = 100
			}
		}
	}
</script>

<style>
	.static{
		color: #2C405A;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		color: #DD524D;
	}
</style>

3. 数组语法

• 可以把一个数组传给 v-bind:class，以应用一个 class 列表。

<template>
	<view>
		<view class="static" :class="[activeClass,errorClass]">111</view>
		<view class="static" v-bind:class="[isActive?activeClass:'',errorClass]">
			222
		</view>
		<view class="static" v-bind:class="[{active:isActive},errorClass]">
			333
		</view>
		<view v-bind:style="[{color:activeColor,fontSize+'px'}]"></view>
	</view>444
</template>

<script>
	export default {
		data() {
			return {
				isActive:true,
				activeClass:'active',
				errorClass:'text-danger',
				activeColor:"green",
				fontSize:50
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.static{
		font-size: 30rpx;
	}
	.active{
		background-color: #007AFF;
	}
	.text-danger{
		font-size: 60rpx;
		color: #DD524D;
	}
</style>

事件绑定

使用@符号绑定事件，例如@click用于绑定点击事件

<template>
  <view @click="handleClick">点击我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件被触发')
    }
  }
}
    
<template>
	<view class="content" @click="viewClick">
		<button type="default" v-on:click="buttonClick">按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			viewClick(){
				console.log('点击view')
				//点击页面
			},
			buttonClick(){
				console.log('点击button')
				//点击按钮
			}
		}
	}
</script>