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>