Vue 数据绑定事件绑定样式绑定语法示例
作者：104828720
这篇文章主要为大家介绍了Vue 数据绑定事件绑定样式绑定语法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
数据绑定
- DOM内容绑定
插值表达式
注意事项
- 1、插值表达式可以使用简单的运算，例如三目运算、字符串拼接、算术运算
- 2、插值表达式可以调用函数，例如：{{ fn() }}
- 3、复杂的计算或者数据处理，应该使用计算属性或者函数
插值表达式的问题
1、会闪动 （解决方案使用v-cloak或者v-text替代插值表达式）
v-text
与插值表达式作用一样，但写在标签属性的位置
<div v-text="msg"></div>
强烈推荐使用v-text取代插值表达式
v-html
此指令有安全隐患，所以只能用于自己的内部数据中，
不能使用在第三方数据上
<div v-html="msg"></div>
- DOM属性绑定
v-bind
注意事项
1、响应式的
2、支持动态处理属性
3、有简写 v-bind:src="xxx" ---> :src="xxx"
事件绑定
v-on
1、有简写 v-on:clock="onClick" ---> @click="onClick"
2、有2种事件调用方式
:click="fn(params, $event)"
:click="fn"
样式绑定
2种样式绑定方式
1、使用class属性动态修改
2、使用style属性动态修改
通过class绑定样式
通过修改class属性的类名来更改样式
- 对象写法
// key就是类名
<view class="box" :class="{'bg-red': isRed}"></view>
export default {
data() {
return {
title: 'Hello',
isRed: true
}
},
methods: {
changeColor(){
this.isRed = !this.isRed;
}
}
}- 数组写法
// 数组元素变量对应的值就是类名
<view class="box" :class="[errorClass,activeClass]"></view>
export default {
data() {
return {
errorClass: 'error',
activeClass: 'active
}
},
methods: {
changeColor(){
this.errorClass = '';
}
}
}- 注意事项
//1、对象与数组可以混合使用（数组包对象）
//2、如果有多个class类名，写法如何更加优雅？（推荐）
<view class="box" :class="objClass"></view>
export default {
data() {
return {
objClass: {
active: true,
error: false
}
}
},
methods: {
changeColor(){
this.isRed = !this.isRed;
}
}
}
//3、默认类名如何处理
<view class="box" :class="[errorClass,activeClass]"></view>- 通过style绑定样式
双向绑定v-model
1、包含2种东西：事件绑定和数据绑定
2、响应式的
自己实现v-model
<input :value="msg" @input="msg = $event.target.value" />
以上就是Vue 数据绑定事件绑定样式绑定语法示例的详细内容，更多关于Vue数据事件样式绑定的资料请关注脚本之家其它相关文章！