介绍
在本文中,您将了解Vue.js中的动态风格和类连接. 使用v-bind:style指令,您将在单击事件中可视化您的字体大小。
虽然通过 DOM 操作是可能的,但 Vue.js 允许您以简短的代码行动态渲染样式和类,并利用其数据模型结构。
强化动态风格
让我们在 Vue.js 中开发一种方法来根据用户输入增加或减少字体大小,为此,Vue 为我们提供了‘v-bind:style’指令。
在您的App.js文件中,实例化一个Vue实例并包括您的数据模型:
1[label App.js]
2data() {
3 return {
4 fontSize: 10
5 }
6}
在您的index.html文件中创建两个按钮,并在v-bind:style指令中创建一个段落:
1[label index.html]
2<button v-on:click="fontSize++">
3 Increase font size
4</button>
5<button v-on:click="fontSize--">
6 Decrease font size
7</button>
8
9<p v-bind:style="{ fontSize: fontSize + 'px' }">
10 Font size is: {{ fontSize }}
11</p>
在每一次点击事件中,v-bind:style指令会增加和减少fontSize变量的值,从而将fontSize的值附加到CSSfont-size属性中。
如果需要,请将多个风格对象添加到v-bind:style指令中。
1[label App.js]
2data() {
3 return {
4 baseStyles: {
5 fontWeight:'800',
6 color: 'red'
7 },
8 overrideStyles: {
9 color:'blue'
10 }
11 }
12}
在index.html文件中,提供一组风格对象:
1[label index.html]
2<p v-bind:style="[baseStyles, overrideStyles]">
3 baseStyles and overrideStyles
4</p>
<$>[注] 注: 要小心在数组中的风格对象的顺序,因为下列元素中的逻辑取代了以前的元素。
现在你已经审查了风格绑定,让我们考虑Vue.js中的动态类。
强制性班级动态化
直接应用风格可能随着要求的变化而变得复杂,为此,‘v-bind:class’指令提供了将类与元素中的内容联系起来的方法。
例如,您可能需要强调元素的文本,并更改颜色和字体重量。
虽然这可以用风格绑定来实现,但Vue.js允许您使用v-bind:class指令添加额外的性能。
要做到这一点,请在App.js文件中创建一组menuItems和一个selected变量,默认值为Home:
1[label App.js]
2data() {
3 return {
4 selected: 'Home',
5 menuItems: ['Home', 'About', 'Contact']
6 }
7}
在index.html文件中,在排序列表中应用一个v-for循环,通过menuItems系列中的元素重复。
每一次点击事件,‘v-bind:class’指令会将‘selected’变量值分配给‘menuItems’中的当前元素。
1[label index.html]
2<ul>
3 <li v-for="item in menuItems"
4 v-on:click="selected = item"
5 v-bind:class="{ selected: selected == item}">
6 {{item}}
7 </li>
8</ul>
您还可以通过数组中的多个类使用v-bind:class指令。
在App.js文件中的数据模型中定义一组类:
1[label Apps.js]
2data() {
3 return {
4 classArray: ['selected', 'underlined']
5 }
6}
在index.html文件中,请使用v-bind:class指令参考您的classArray。
1[label index.html]
2<p v-bind:class="[classArray]">
3 Multiple classes {{ classArray }}
4</p>
这将适用于元素的选择和强调类。
结论
使用 Vue.js 风格和类指令在元素中保持动态操作,并支持多个实例,以获得更强大的性能。