我需要在里面显示一个html内容 VUE </跨度> -tippy元素(https://github.com/KABBOUCHI/ VUE </跨度> -tippy)有数据绑定元素,但它不起作用,
&lt; div id =“demo”&gt; &LT; p为H. {{消息}}&LT; / p为H. &lt; br锟;“&gt; &LT; DIV&GT; {{message}} - 我的HTML内容 &LT; / DIV&GT; &LT; / DIV&GT; &lt; br /&gt;&LT; / DIV&GT;
JS
var vueTippy = require(’ VUE </跨度> -tippy“)Vue.use(vueTippy)
var data = { 消息:‘Hello Vue.js!’}
var demo = new Vue公司 </跨度> ({ el:‘#demo’, 数据:数据})
我怎样才能解决这个问题?
谢谢 锟斤拷
我添加了对HTML Template和Vue Component的支持。
将vue-tippy软件包更新到最新版本,您的代码将正常运行。
例:
new Vue({ el: "#app", data() { return { message: 'Hello Vue.js!' } } })
.btn { margin: 0; color: white; box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); background: linear-gradient(135deg, #73a5ff, #5477f5); letter-spacing: 0.5px; font-family: inherit; display: inline-block; font-weight: 400; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .5rem 1rem; font-size: 1rem; border-radius: .25rem; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script> <script src="https://kabbouchi.com/vue-tippy/vue-tippy.min.js"></script> <div id="app"> <button class="btn" v-tippy data-distance="15" data-theme="light" data-animation="scale" data-arrowsize="big" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true" data-html="#contentpopup"> Popover HTML <small class="opacity-low">(click)</small> </button> <div id="contentpopup" style="display: none"> <div> <h3> Header</h3> <p style="color: black"> {{ message }} - data binding </p> </div> </div> </div>