一、vue中,使用js函数的方法
在vue文件中,如果想要在组件里,通过事件触发,调用到函数,这个函数需要放在特定的位置,如下:
<script>
export default {
methods: {
t1(){},
t2(){},
t3(){}
}
}
</script>
例如用户点击,通过 click 事件触发,调用 t1 函数,需要像上面这样写,否则找不到这个函数。
函数需要写在 methods:{} 里,methods写在 export default{} 里,export default{} 写在 <script>标签里。
注:记得把 <script> 标签放在 html 代码的下方,以防加载顺序问题。
整个vue文件内容如下:
test1.vue
<template>
<div class="top-title" v-if="myDivIsShow">
<input class='btn' type="button" value="按钮" @click="t1" />
</div>
</template>
<script>
export default {
methods: {
t1(){},
t2(){},
t3(){}
}
}
</script>
<style lang="less" scoped>
.top-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
border-radius: 2px;
margin-right: 0;
margin-left: 10px;
}
</style>
二、vue中,引入js文件的方法
例如,在 test1.vue 文件中,需要引入 test.js,(vue文件和js文件放在同一个目录下)
在 html 文件中,是这样写的:
<script type="text/javascript" src="test.js"></script>
但在vue文件中,这样写不会生效。
需要这样写:
先将 js 文件中的函数前面加上export,即:
export function t1(){}
再在 vue 文件中,<script>标签里使用 import 导入函数
<script>
import { t1 } from './test.js'
</script>
花括号里的变量名需要和 js 文件中的函数名一致。
如果想要在组件中,通过事件调用 t1 这个函数,需要在 methods 添加一个函数来调用,不能直接在组件里绑定t1这个函数。
像这样写:
<template>
<div class="top-title" v-if="myDivIsShow">
<input class='btn' type="button" value="按钮" @click="f1" />
</div>
</template>
<script>
import { t1 } from './test.js'
export default {
methods: {
f1(){
t1()
},
}
}
</script>
。。。