Vue学习笔记(五)

Class绑定

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

绑定对象

isActive: true,hasError: false,classObject: {'active': true,'text-danger': true},
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p><p :class="classObject">Class样式绑定2</p>

绑定数组

<p :class="[arrActive,arrHasError]">Class样式绑定3</p>
<p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p>

绑定对象和数组

Class样式绑定5

注意事项
数组和对象的嵌套过程中，只能数组嵌套对象，不能反其道而行

<script>export default {data() {return {isActive: true,hasError: false,classObject: {'active': true,'text-danger': true},arrActive: "active",arrHasError: "text-danger"}}}
</script><template><p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p><p :class="classObject">Class样式绑定2</p><p :class="[arrActive,arrHasError]">Class样式绑定3</p><p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p><p :class="[{active:isActive},{'text-danger':hasError}]">Class样式绑定5</p>
</template><style>.active {/* color: red; */font-size: 30px;}.text-danger {color: red;}</style>

style绑定

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

绑定对象

<script>export default {data() {return {activeColor: 'green',size: 30,styleObject: {color: 'red',fontSize: '30px'}}}}
</script><template><p :style="{color:activeColor,fontSize:size+'px'}">Style绑定1</p><p :style="styleObject">Style绑定2</p>
</template>

绑定数组(了解)

<p :style="[styleObject]">Style绑定3</p>

侦听器

我们可以使用watch选项在每次响应式属性发生变化时触发一个函数

<script>export default {data() {return {message: 'Hello Vue 3'}},methods: {updateHandle() {this.message = 'Hello World!'}},watch: {message(newValue, oldValue) {//数据发生变化时触发console.log(newValue, oldValue)}}}
</script><template><h3>侦听器</h3><p >{{ message }}</p><button @click="updateHandle">修改数据</button>
</template>

侦听器函数名必须与key保持一致

表单输入绑定

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

文本框

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

复选框

<script>export default {data() {return {message: "",checked: false}}}
</script><template><h3>表单输入绑定</h3><form><input type="text" v-model="message"><p>Message is: {{ message }}</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label></form>
</template>

修饰符

v-model也提供了修饰符：.lazy、.number、.trim

.lazy

默认情况下，v-model会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。

<input type="text" v-model.lazy="message">

.number

只记录数字

<input type="text" v-model.number="message">

.trim

忽略前后空格

<input type="text" v-model.trim="message">