Question

我正在尝试制作游戏。

当玩家提交游戏时，通常会出现欢迎信息！但没有出现。

<template>
  <div>
    <span v-html = "welcomeMessage" v-hide></span>

    <form v-hide v-on:submit.prevent="setPlayer">
      <input name="player" placeholder="Enter the player name" v-border:blue/>
      <button type="submit" v-border:red>Play</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'player',
    data: function () {
      return {
        player: '',
        welcomeMessage: ''
      }
    },
    updated: function () {
      this.welcomeMessage = `Hi <span class="player">${this.player}</span> ! `
    },
    methods: {
      setPlayer: function (event) {
        this.player = event.target[0].value
      }
    },
    directives: {
      border: function (el, binding) {
        el.style.borderColor = binding.arg
      },
      hide: function (el, binding, vnode) {
        let isForm = vnode.tag === 'form'
        let player = vnode.context.player
        if (isForm) {
          el.style.display = player ? 'none' : 'block'
        } else {
          el.style.display = player ? 'block' : 'none'
        }
      }
    }
  }
</script>

<style scoped>
</style>

似乎不起作用，我不知道为什么！在更新的钩子中更新了玩家的名称，但模板没有显示它。

任何线索。

Thxs。

Answer 1

使用v-model将输入绑定到数据，这会在输入上创建两个绑定。这可以减少一对代码行。

<template>
 <div>
   // show message only if new player created
   <span v-html="welcomeMessage" v-show="playerCreated"></span>
   <form v-on:submit.prevent="setPlayer" v-if="!playerCreated">
     <input name="player" v-model="player" placeholder="Enter the player name" v-border:blue/> // bind input to `player` data property.
     <button type="submit" v-border:red>Play</button>
   </form>
 </div>
</template>

在组件逻辑中：

data: function () {
 return {
   player: '',
   playerCreated: false,
   welcomeMessage: ''
  }
 },
 methods: {
  setPlayer: function () {
   this.playerCreated = true;
   this.welcomeMessage = `Hi <span class="player">${this.player}</span> !`
  }
},

Answer 2

在将数据加载到body时，您可以使用它，它在模态中为我工作 JSFiddle

<template id="some-template">
    <div class="header">
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
    </div>
</template>
<div id="app">
    <some>
        <div slot="header" v-html="rawHtmlheader"></div>
        <div slot="body" v-html="rawHtmlbody"></div>
        <div slot="footer" v-html="rawHtmlfooter"></div>
    </some>
</div>

JS逻辑

Vue.component('some', {
  template: '#some-template'
})


new Vue({
  el: '#app',
  data: {
    rawHtmlheader: '<p style="color:red">RED HEADER</p>',
    rawHtmlbody: '<p style="color:green">GREEN TEXT</p>',
    rawHtmlfooter: '<p style="color:brown">BROWN FOOTER</p>',
  }
})

带有更新的V-Html不起作用

2 个答案: