<h3>练习:通过动态改变属性完成字体大小和颜色的改变 用按钮实现</h3> <span style="color:red;font: Size 16px;">我是一行待改变的文字</span> 续写代码
时间: 2024-09-19 18:01:42 浏览: 47
为了续写这段代码,我们需要使用Vue.js的数据绑定和计算属性来管理状态。首先,我们创建一个Vue实例,并初始化一些变量来跟踪当前的颜色和字体大小:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态字体颜色和大小</title>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
<div id="app">
<span v-bind:class="{ red: color === 'red', green: color === 'green', yellow: color === 'yellow', blue: color === 'blue', orange: color === 'orange'}"
:style="{ fontSize: fontStyle + 'px' }">
我是一行待改变的文字
</span>
<div>
<label for="colorSelect">选择颜色:</label>
<select v-model="color" id="colorSelect">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="orange">橙色</option>
</select>
</div>
<div>
<label for="fontSizeSelect">选择字体大小:</label>
<select v-model="fontStyle" id="fontSizeSelect">
<option value="16">16px</option>
<option value="18">18px</option>
<option value="14">14px</option>
</select>
</div>
<button @click="increaseFontSize">放大字体</button>
<button @click="decreaseFontSize">缩小字体</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
color: 'red',
fontStyle: '16'
},
methods: {
increaseFontSize() {
this.fontStyle = parseInt(this.fontStyle) + 2;
},
decreaseFontSize() {
if (parseInt(this.fontStyle) > 10) { // 防止字体大小过小
this.fontStyle = parseInt(this.fontStyle) - 2;
}
}
}
});
</script>
</body>
</html>
```
这个示例中,我们添加了两个下拉菜单(`select`)来让用户选择颜色和字体大小,`v-model`指令用于双向数据绑定。`increaseFontSize`和`decreaseFontSize`方法用于改变字体大小。当用户点击相应的按钮时,会调用相应的方法,更新数据并间接更新视图。
阅读全文