The function of vue.set: 1. Set the data attribute through the [Vue.set] method, the code is [Vue.set(data,'sex', 'male') ]; 2. Use the [vm.$set] instance method, the code is [var key = 'content';].
【Recommended related articles: vue.js】
#The role of vue.set:
When a vue instance is generated, when data is assigned again, sometimes it will not be automatically updated to the view. Go up;
If you add new attributes to the instance after the instance is created, it will not trigger a view update
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.jb51.net/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
说明：{{info.content}}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
var data = {
name: "php中文网",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
var vm = new Vue({
el:'#app',
data: data,
ready: function(){
//Vue.set(data,'sex', '男')
//this.$set('info.'+key, 'what is this?');
}
});
data.sex = '男'；//不生效
</script>
</body>
</html>Running results:
姓名：php中文网 年龄：3 性别： 说明：my name is test
Both in age and name get and set methods, but there are no these two methods in sex. Therefore, vue will not automatically update the view after setting the sex value;
Solution:
<script>
var data = {
name: "脚本之家",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
new Vue({
el:'#app',
data: data,
ready: function(){
Vue.set(data,'sex', '男');
this.$set('info.'+key, 'what is this?');
}
});
</script>1. Pass The Vue.set method sets the data attribute, as above:
Vue.set(data,'sex', '男')
2. You can also use the vm.$set instance method, which is also an alias of the global Vue.set method:
var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式 this.$set('info.'+key, 'what is this?'); //或 this.$set('info.content', 'what is this?');
Related free learning recommendations: JavaScript(Video)
The above is the detailed content of What is the use of vue.set. For more information, please follow other related articles on the PHP Chinese website!
What is Vuex and how do I use it for state management in Vue applications?Mar 11, 2025 pm 07:23 PMThis article explains Vuex, a state management library for Vue.js. It details core concepts (state, getters, mutations, actions) and demonstrates usage, emphasizing its benefits for larger projects over simpler alternatives. Debugging and structuri
How do I create and use custom plugins in Vue.js?Mar 14, 2025 pm 07:07 PMArticle discusses creating and using custom Vue.js plugins, including development, integration, and maintenance best practices.
How do I implement advanced routing techniques with Vue Router (dynamic routes, nested routes, route guards)?Mar 11, 2025 pm 07:22 PMThis article explores advanced Vue Router techniques. It covers dynamic routing (using parameters), nested routes for hierarchical navigation, and route guards for controlling access and data fetching. Best practices for managing complex route conf
What are the key features of Vue.js (Component-Based Architecture, Virtual DOM, Reactive Data Binding)?Mar 14, 2025 pm 07:05 PMVue.js enhances web development with its Component-Based Architecture, Virtual DOM for performance, and Reactive Data Binding for real-time UI updates.
How do I configure Vue CLI to use different build targets (development, production)?Mar 18, 2025 pm 12:34 PMThe article explains how to configure Vue CLI for different build targets, switch environments, optimize production builds, and ensure source maps in development for debugging.
How do I use Vue with Docker for containerized deployment?Mar 14, 2025 pm 07:00 PMThe article discusses using Vue with Docker for deployment, focusing on setup, optimization, management, and performance monitoring of Vue applications in containers.
How do I use tree shaking in Vue.js to remove unused code?Mar 18, 2025 pm 12:45 PMThe article discusses using tree shaking in Vue.js to remove unused code, detailing setup with ES6 modules, Webpack configuration, and best practices for effective implementation.Character count: 159
How can I contribute to the Vue.js community?Mar 14, 2025 pm 07:03 PMThe article discusses various ways to contribute to the Vue.js community, including improving documentation, answering questions, coding, creating content, organizing events, and financial support. It also covers getting involved in open-source proje
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Zend Studio 13.0.1
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
