Question

我正在构建一个vue.js网站，该网站可用作我办公室的内部代码存储库。我的目标是创建许多页面，以预览代码块的外观，并在其下面有一个文本区域，其中包含复制/粘贴该代码所需的代码。

理想情况下，我只想使用一个包含HTML块的数据字段，可以将其两次放置在我的网站中；一次在文本区域外预览其外观，一次在文本区域内供用户复制

我尝试将dplyr或library(tibble) library(dplyr) chosen_vect <- seq(12, 120, 12) chosen_vect #> [1] 12 24 36 48 60 72 84 96 108 120 iris %>% rownames_to_column() %>% # to test if we slice the right rows slice(chosen_vect) #> rowname Sepal.Length Sepal.Width Petal.Length Petal.Width Species #> 1 12 4.8 3.4 1.6 0.2 setosa #> 2 24 5.1 3.3 1.7 0.5 setosa #> 3 36 5.0 3.2 1.2 0.2 setosa #> 4 48 4.6 3.2 1.4 0.2 setosa #> 5 60 5.2 2.7 3.9 1.4 versicolor #> 6 72 6.1 2.8 4.0 1.3 versicolor #> 7 84 6.0 2.7 5.1 1.6 versicolor #> 8 96 5.7 3.0 4.2 1.2 versicolor #> 9 108 7.3 2.9 6.3 1.8 virginica #> 10 120 6.0 2.2 5.0 1.5 virginica组件标签放置在HTML的硬编码v-html中，但其中的任何内容都将在vue有机会交换之前被渲染删除内容，如示例中所示。

在下面提供的演示中，我有一个vue组件，将三个串联的字符串分开。是否可以用下面的新Vue中的数据字段<copycode></copycode>替换中间字符串<textarea>？

(code goes here)

sampleCode

Vue.component('copycode', {
  template: '<textarea id="codeblock01">' + '(code goes here)' + '</textarea>',
});

new Vue({
  el: '#app',
  data: {
    sampleCode: 
    `<table>
      <tr>
      	<td>
      		<p>Content Block Demo</p>
      	</td>
      </tr>
     </table>`,
  }
});

下面的新vue中的数据字段body { font-family: 'arial', 'helvetica', sans-serif; } table { width: 500px; margin-bottom: 15px; background: red; color: #fff; }？

Answer 1

如果您希望组件知道某个数据项，则需要pass the item as a prop。然后，您可以使用花括号将其插值到文本区域中，如下例所示。

如果要使文本区域中的更改反映在父级中，则需要emit and handle input events。下面的示例不这样做。

Vue.component('copycode', {
  template: '<textarea id="codeblock01">{{value}}</textarea>',
  props: ['value']
});

new Vue({
  el: '#app',
  data: {
    sampleCode: 
    `<table>
      <tr>
      	<td>
      		<p>Content Block Demo</p>
      	</td>
      </tr>
     </table>`,
  }
});

body {
  font-family: 'arial', 'helvetica', sans-serif;
}

table {
  width: 500px;
  margin-bottom: 15px;
  background: red;
  color: #fff;
}

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  
  <!--renders the code I wish to demo from vue data-->
  <span v-html="sampleCode"></span>
  
  <!--renders the textarea that will allow users to easily copy the code-->
  <copycode :value="sampleCode"></copycode>

</div>

将数据字段插入Vue组件

1 个答案: