After scanning the document on the vue official website, I started writing the website project. Without design, I found a website of h5 win-win software in Baidu to copy it. It was a bit broken. Then I changed the content.
First start a list display
After the vue instance is ready, add default data to the object and the list is loaded successfully. Check the source code to see if it's the same as you think. Currently, it is just showing the initialized default array. The operations in the list have not been added yet. Try to add id fields and numbers to the initialized array.
Refresh it, there is no effect. The cache of Chrome that cheats people is particularly serious, so you have to clear the cache or force refresh. Vue made an error in the console, saying that the {{id}} syntax error of the a tag content (<a href="xxx/detail/{{id}}" rel="external nofollow" >Article 1</a>). After checking the following document, there was no similar example, so I started to try to rewrite it based on my own experience.
After a while of work, I found that it was not ideal. It seemed that the document was not read carefully enough, so it was necessary to make a targeted effort. When I saw the class and style of the tag, I saw the object syntax and array syntax, without saying a word, I first wrote the object writing method into the a tag, refreshed to see the effect, and found that the href of the tag a tag is like this/[object object], and I laughed.
It seems that I was using it wrong. After reading the array syntax description, I directly coding, <a v-bind:href="['xxx/detail/'+]" rel="external nofollow" rel="external nofollow" >Article 1</a> This time it has an effect
Why is it called array syntax? I have never understood it. Why can only be written like this? I always feel inappropriate. Find a safe look for a similar one.
First, add some codes
<tr v-for="item in Strategys" class="ng-scope">
<td>
<a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+]" rel="external nofollow" rel="external nofollow" >{{}}</a>
</td>
Data block code
var vm = new Vue({
el: '#section-strategies',
data: {
parentMessage: 'Parent',
StrategyCnt:0,
Strategys: [{id:1,name:'Article 1'}，{id:2,name:'Article 2'}]
}
})
Then use the ultimate move, use Ajax to request server data, and it is impossible to use initialization and default data all the time
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.