This time I will bring you how to implement vue tagAttributesData bindingand splicing, how to implement vue tag attribute data binding and splicingNotes What are they? Here are actual cases. Let’s take a look.
After scanning the documents on the vue official website, I started to write the website project. There was no design, so I found an h5 winning software website on Baidu and copied it. It was a bit broken when I thought about it. Then change the content.
First start making a list display
After the vue instance is created, add default data to the object and the list is loaded successfully. Check out the source code to see if it's what you had in mind. Currently, we only display the initialized default array. The operations and jumps in the list have not been added yet. Try adding the id field and number to the initialized array
and refresh it. It has no effect. It’s a rip-off of Chrome. The cache is particularly serious and I have to clear the cache or force refresh. vue made an error in the console, saying that the {{id}}# of the a tag content (Article 1) ##Grammar error, I checked the document and there was no similar example, so I started to try to rewrite it based on my own experienceAfter a while, I found that it was not ideal. It seemed that the document was not read carefully enough. , it is necessary to pound it in a targeted manner. When I saw that the class and style of the tag were bound, I saw that there was object syntax and array syntax. Without further ado, I first wrote the object writing method into the a tag, refreshed to see the effect, and found that the href of the a tag was like detail/[
object object], I laughed.
安全 and see how others write it. I find that what I wrote is too bloody.
Let’s start with part of the code.<tr v-for="item in Strategys" class="ng-scope"> <td> <a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a> </td>
var vm = new Vue({ el: '#section-strategies', data: { parentMessage: 'Parent', StrategyCnt:0, Strategys: [{id:1,name:'文章1'},{id:2,name:'文章2'}] } })
How to modify create-react-app to support multiple pages
without using select How to implement the drop-down box function in vue under this situation
The above is the detailed content of How to implement vue tag attribute data binding and splicing. For more information, please follow other related articles on the PHP Chinese website!