怎么使用Vue中的v-html

這篇文章主要介紹“怎么使用Vue中的v-html”，在日常操作中，相信很多人在怎么使用Vue中的v-html問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Vue中的v-html”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

首先在網(wǎng)上下載了vue.min.js的文件。

我選擇了v-html這個標記作為入門，它的作用是能夠?qū)⒆兞恐凶址愋偷膆tml文本以html標記的形式顯示在頁面上。例如：

<div id="div1">

<div v-html="h"></div>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁面需要的vue數(shù)據(jù)

h: "<h2>Hello ,world</h2>"

}

});

</script>

哇，不錯，頁面終于出現(xiàn)了Hello, world，不錯，接下來看看其他的簡單的標簽。

v-if 和v-show ，表示是否顯示頁面內(nèi)容。

當if或者show中變量的值為true時，當前控件顯示，false則不顯示

<div id="div1">

<img v-show="checked" src="img/3.jpg" width="200" /><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁面需要的vue數(shù)據(jù)

checked: false

}

});

</script>

然后，把v-show換成v-if，原來一樣的。

接下來看看v-for標簽吧，看起來作用應(yīng)該是循環(huán)。

<div id="div1">

<ul>

<li v-for="(f, index) in arr">{{index}} {{f}}</li>

<li v-for="n in 10">{{n}}</li>

<li v-for="(v,k,index) in obj">{{index}}=={{k}}:{{v}}</li>

</ul>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁面需要的vue數(shù)據(jù)

arr: ["蘋果", "香蕉", "梨子", "橘子"],

obj: {"name":"mary", "age":20, "sex":"女"}

}

});

</script>

到此，關(guān)于“怎么使用Vue中的v-html”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>