快捷導(dǎo)航

Vue.set 全局操作簡單示例

更新時間：2019年09月19日 11:43:44 作者：Json____

這篇文章主要介紹了Vue.set 全局操作,結(jié)合簡單實例形式分析了Vue.set 全局操作相關(guān)使用技巧與注意事項,需要的朋友可以參考下

本文實例講述了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>
<h1>Vue.set 全局操作</h1>
<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++;
    //用下標的時候改變值的時候就不會渲染
   // app.arr[0]=4;
    //Vue提供了set 來進行渲染
    Vue.set(app.arr,1,'json')
  }
</script>

運行結(jié)果：

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

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

您可能感興趣的文章:

相關(guān)文章

詳解Vue中表單組件的雙向數(shù)據(jù)綁定
Vue?提供了雙向數(shù)據(jù)綁定機制,使得開發(fā)者可以輕松地將表單組件的值與?Vue?實例中的數(shù)據(jù)進行關(guān)聯(lián),本文將詳細介紹如何在?Vue?中使用這些表單組件,并實現(xiàn)雙向數(shù)據(jù)綁定,需要的可以參考下
2024-03-03
vue中引入第三方字體文件的方法示例
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實現(xiàn)方法及其錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
用vue寫一個仿簡書的輪播圖的示例代碼
本篇文章主要介紹了用vue寫一個仿簡書的輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
Vue監(jiān)視數(shù)據(jù)的原理詳解
這篇文章主要為大家詳細介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
Vue顯示圖片的幾種方式小結(jié)
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vite開發(fā)環(huán)境搭建詳解
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強大的Web應(yīng)用程序。
2023-02-02
vue基于el-table拓展之table-plus組件
本文主要介紹了vue基于el-table拓展之table-plus組件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
如何給vant的Calendar日歷組件添加備注
這篇文章主要介紹了如何給vant的Calendar日歷組件添加備注，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue實現(xiàn)檢測敏感詞過濾組件的多種思路
這篇文章主要介紹了vue編寫檢測敏感詞匯組件的多種思路，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04