HTML標記內的Javascript

Question

我想在HTML標記中引用這樣的Javascript變量：

<ul data-target="#{this.state.name}"></ul>

但似乎這不是有效的語法。 我知道這在Coffeescript中是可能的，但是Javascript中是否有類似的語法？ 我正在使用ES6。

Answer 1

我相信沒有一些框架是不可能的，例如。 有角度的。

另一方面，您可以使用普通的javascript設置元素的屬性：

document.getElementById("my-thingy").setAttribute("data-target", "someStateName");

Answer 2

您似乎正在尋找允許您在ES6中進行字符串插值的模板文字 。 相當於Coffeescript的

"<ul data-target=\"#{this.state.name}\"></ul>"

將會

`<ul data-target="${this.state.name}"></ul>`

Answer 3

您應該刪除引號。 並將＃與state.name值連接。

<ul data-target={"#" + this.state.name}></ul>

Answer 4

正如醫生所說

HTMLElement.dataset屬性允許以讀寫模式訪問元素上設置的所有自定義數據屬性（data- *）。 它是DOMString的映射，每個自定義數據屬性都有一個條目。

請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

使用DOM元素上的dataset屬性獲取整個數據集對象。

var eleDOM = document.getElementById('list');

eleDOM.dataset ;

取得個人財產

eleDOM.dataset.data1;

修改單個數據屬性

eleDOM.dataset.data1 = "modified";

  //Fetch the entire dataset object using the dataset property on the DOM element. var eleDOM = document.getElementById('list') console.log(eleDOM.dataset); //fetch the individual property console.log(eleDOM.dataset.data1); //Modify the individual data properties eleDOM.dataset.data1 = "modified"; 

  <ul id ='list' data-data1 = "Panner" data-data2="Cheese"> </ul>