How to implement vue tag attribute data binding and splicing

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.

It seems that I still used it wrong. After reading the array syntax description, I coded directly, Article 1 This works.

I still don’t understand why it is called array syntax. Why can this place only be written like this? It always feels wrong. Find a similar

安全 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="[&#39;xxx/detail/&#39;+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
 </td>

Data block code

var vm = new Vue({
　　el: '#section-strategies',
　　data: {
　　　　　　parentMessage: 'Parent',
　　　　　　StrategyCnt:0,
　　　　　　Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
　　}
 })

The next step is to use Ajax to request server data. It is impossible to always use initialization and default data

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

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!