Vue.set 全局操作簡(jiǎn)單示例

發(fā)布時(shí)間：2020-08-26 09:22:27 來(lái)源：腳本之家閱讀：103 作者：Json____ 欄目：web開(kāi)發(fā)

本文實(shí)例講述了Vue.set 全局操作。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.set 全局操作</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h2>Vue.set 全局操作</h2>
<hr>
<div id="app">
   {{count}}
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
</div>
<p><button onclick="add()">Add</button></p>
</body>
</html>
<script>
  var outData={
    count:1,
     goods:'car',
    arr:[1,2,3,4]
  }
  var app = new Vue({
    el:'#app',
    data:outData,
  })
  function add(){
    // Vue.set(outData,'count',2)
    // app.count++;
   // outData.count++;
    //用下標(biāo)的時(shí)候改變值的時(shí)候就不會(huì)渲染
   // app.arr[0]=4;
    //Vue提供了set 來(lái)進(jìn)行渲染
    Vue.set(app.arr,1,'json')
  }
</script>

運(yùn)行結(jié)果：

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

Vue.set 全局操作簡(jiǎn)單示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽