6.vue学习笔记(style绑定+监听器+表单的输入绑定)

文章目录

- - - 1.style绑定
    - 2.监听器
    - 3.表单的输入绑定
    - - 3.1.复选框
      - 3.2.修饰符
      - 3.2.1 .lazy

1.style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为style是attribute，我们可以和其他attribute一样使用v-bind将它们和动态字符串绑定。
但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。
因此，Vue专门为style的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组
推荐使用class。style绑定权重高，后期修改比较麻烦

<template><p :style="{ color:activeColor, fontSize:fontSize + 'px'}">Style样式绑定1</p><!-- 本身是对象 不需要加大括号 --><p :style="styleObject">Style样式绑定2</p><!-- 不建议使用 --><p :style="[styleObject]">Style样式绑定3</p></template><script>export default {data(){return{activeColor: "green",fontSize: 30,styleObject:{color: "blue",fontSize: "30px"}}}
}
</script>

2.监听器

监听数据的变化
可以使用watch选项在每次（响应式）属性发生变化时触发一个函数
响应式数据： data中{{}}模板语法绑定的数据

在这里插入图片描述

<template><h3>侦听器</h3><p>{{ message }}</p><button @click="updateHandle">修改数据</button>
</template><script>export default {data(){return{message:"Hello"}},methods:{updateHandle(){this.message = "World"}},watch:{//函数名与侦听的数据对象保持一致//newValue 改变之后的数据//oldValue 改变之前的数据message(newValue,oldValue){//数据发生变化，自动执行的函数console.log("newValue:《" + newValue + "》 oldValue:《" + oldValue + "》");}}
}
</script>

3.表单的输入绑定

在前端处理表单时，我们常常要将表单输入框的内容同步给JavaScript中相应的变量。
手动连结值绑定和更改事件监听器可能会很麻烦，v-model指令可以简化这一步骤

在这里插入图片描述

3.1.复选框

单一的复选框，绑定布尔类型值

<template><h3>表单输入绑定</h3><form><input type="checkbox" id="checkboxid" v-model="checked"><!-- 每个label绑定一个id --><label for="checkboxid">{{ checked }}</label></form>
</template><script>export default {data(){return{checked:false}}
}
</script>

3.2.修饰符

v-model也提供了修饰符：
.lazy		如饿汉式
.number		只能输入数字
.trim		去除前后空格

3.2.1 .lazy

默认情况下，v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据
如：输入完失去焦点才显示，不实时

<template><h3>表单输入绑定</h3><form><input type="test" v-model.lazy="message"><p>{{ message }}</p></form>
</template><script>export default {data(){return{message:""}}
}
</script>