vue渲染問題-執行沒出現錯誤但是也沒出現設定的資料(已成功範例放在文章最下方)

vue.js vue

itbubble 2020-12-18 14:02:22 ‧ 1986 瀏覽

分享至

程式是網路上找來的範例
問題如標題所述...
請問我是還少做了什麼嗎?

執行畫面↓

詳細的code↓

也試過下面的方式，不過也一樣毫無反應

成功範例↓

綜合回覆提到的內容再加上修改排版方式就成功了
雖然沒有用到template 不過很接近我想要做到的樣式
這題就算是完結了^^

看更多先前的討論...收起先前的討論...

Homura iT邦高手 1 級 ‧ 2020-12-18 14:24:13 檢舉

templeate拿掉, script放在dom下面試試

itbubble iT邦新手 5 級 ‧ 2020-12-18 14:30:52 檢舉

謝謝你~ 有出現文字了

itbubble iT邦新手 5 級 ‧ 2020-12-18 14:34:16 檢舉

但是我不知道原因是什麼。還有其他問題想請教一下
問題1:不能用templeate嗎?
問題2:不能用templeate的話，這樣要怎麼做出自動渲染的li ?(如文章內的最後一張圖)
問題3:script不是插那裡都可以嗎?為什麼移到div下方就可以了?

listennn08 iT邦高手 5 級 ‧ 2020-12-18 14:41:21 檢舉

你把 id 改放在 template 上就會渲染出來了
沒放 id 他就是普通的 template 不會做任何事可以看一下MDN的介紹
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/template

script 要放在 body 最下方才能確保可以抓到 dom 的所有元素

Homura iT邦高手 1 級 ‧ 2020-12-18 14:48:00 檢舉

有人回答了
template你需要經過定義過並用vue註冊方法註冊過才能work

https://vuejs.org/v2/guide/components.html

建議你還是從vue官網一步一步學不要直接抓範例來改好...
script放最body下面是因為有可能還沒讀完dom就先執行
所以才要放在body最下面