我在制作一些网页功能,但是遇到了一个问题。
我想创建几个HTML结构并使用v-html添加Vue指令,但我无法实现。
那么,如何使用v-html渲染Vue指令呢?
当然,我知道这可能会导致XSS漏洞,但我会过滤任何关键标记,所以我不在意。
请分享你的技巧!
我已经使用Vue.compile函数,但它只支持完整的构建,这与我的情况不匹配。
<button @click="go()">go</button>
这就是我想要使用v-html制作的内容。但是@click指令没有被渲染...
这是App.vue的结果:
但是go按钮不能调用go函数。
App.vue
<template>
<div id="app">
<input type="text" v-model="name" />
<p v-html="name"></p>
<!-- Below tag is what i want to make using v-html -->
<!-- <button @click="go()">gogo</button> -->
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
data:function(){
return {
name:'',
}
},
methods:{
go(){
alert('hi');
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
v-html
中需要Vue语法的其他部分? - skirtlev-on
,类似于v-on="{click: go()}"
。 - Michaelv-html
中使用更多的指令,而不仅仅是v-on
事件监听器 :) - leesh<button v-on="{click: go()}">go</button>
也不起作用 :,( - leesh