css3 的属性你忘记了吗 ? 你确定你的老师 不会 气的打你 , 如有帮助给个采纳谢谢 , 也可以使用第三方库 如 an...css 的那个
写一个 放大的css 单击按钮的时候 给这个元素加上这个class 就好了
你可以使用Vue.js创建一个组件来实现这个功能。以下是一个简单的例子,它包含一个按钮和一个文本,当你点击按钮时,文本将会变大。
在这个例子中,我们使用了Vue的v-if指令来控制文本是否显示。当点击按钮时,我们使用v-on:click指令来改变文本是否显示。
html
<template>
<div>
<button @click="toggleText">
点击我
</button>
<p v-if="showText">
这是一行文本
</p>
</div>
</template>
<script>
export default {
data() {
return {
showText: true,
};
},
methods: {
toggleText() {
this.showText = !this.showText;
},
},
};
</script>
在这个例子中,我们定义了一个叫做showText的数据属性,它的初始值为true。我们也定义了一个叫做toggleText的方法,当这个方法被调用时,它会将showText的值反转(从true变为false,或者从false变为true)。
在模板中,我们使用了Vue的v-on:click指令来绑定按钮的点击事件到toggleText方法。我们也使用了Vue的v-if指令来只有当showText为true时才显示段落。
所以当你点击按钮时,文本将会变大(因为当showText为false时,段落不会显示,当它为true时,段落会显示并被放大)。
不知道你这个问题是否已经解决, 如果还没有解决的话:在放组件的文件夹中,新建个js文件把所有组件都导出:
// 这里统一把组件都导出,在main.js中引入
import Vue from 'vue'
import pgFrom from './pg-form'
import pgTable from './pg-table'
// 注意每个组件内部一定要有name属性,要不拿下面不到对象的
Vue.component(pgFrom.name, pgFrom)
Vue.component(pgTable.name, pgTable)
export { pgFrom, pgTable }
main.js中
import * as pgComponent from './components/business-components' // 导入全局组件(对象类型),这样写默认导入index.js
Object.values(pgComponent).forEach(i => { // 循环注册组件
Vue.component(i.name, i)
})
更好的方法是直接用正则去匹配文件:
// 这里统一把组件都导出,在main.js中引入
import Vue from 'vue'
const components = require.context('./', true, /.vue$/)
components.keys().forEach(fileName => {
const component = components(fileName)
Vue.component(component.default.name, component.default)
})
main.js中
/* 引入公共组件 */
import '@/components/index.js'