VUE框架实现页面列表信息主键问题的解决和常见语法实现------VUE框架

﹏ヽ暗。殇╰゛Y 2024-02-27 05:52 63阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="https://unpkg.com/vue@3"></script>
>     </head>
>     <body>
>         <div id="app">
>             {
>         {message}}
>         </div>
>         <div id="app1">
>             <p>姓名:{
>         {username}}</p>
>             <p>性别:{
>         {gender}}</p>
>             <p>{
>         {desc}}</p>
>             <p v-html="desc"></p>
>         </div>
>         <div id="app2">
>             <a :href="link">百度</a>
>             <input type="text" :placeholder="inputValue">
>             <img :src="imgSrc" :style="{width:w}" alt="">
>         </div>
>         <div id="app3">
>             <p>{
>         {number + 1}}</p>
>             <p>{
>         {ok ? 'True' : 'False'}}</p>
>             <p>{
>         {message.split('').reverse().join('')}}</p>
>             <p :id="'list-' + id">xxx</p>
>             <p>{
>         {user.name}}</p>
>         </div>
>         <div id="app4">
>             <h3>count的值为: {
>         {count}}</h3>
>             <button v-on:click="addCount">+1</button>
>             <button @click="count+=1">+1</button>
>         </div>
>         <div id="app5">
>             <button @click="flag = !flag">Toggle Flag</button>
>             <p v-if="flag">请求成功 --- 就 v-if控制</p>
>             <p v-show="flag">请求成功 --- 被v-show控制</p>
>         </div>
>         <div id="app6">
>             <div>
>                 <input type="text" v-model="name">
>                 <button @click="addNewUser">添加</button>
>             </div>
>             <ul>
>                 
>                 
>                 <li v-for="(user,index) in userList" :key="user.id">
>                     <input type="checkbox"/>id是:{
>         {user.id}},姓名是: {
>         {user.name}}
>                 </li>
>             </ul>
>         </div>
>         <script>
>             const vm5 = {
>                 data: function(){
>                     return{
>                         userList: [
>                             {id: 1,name:'zhangsan'},
>                             {id: 2,name:'lisi'},
>                             {id: 3,name:'wangwu'}
>                         ],
>                         //输入的用户名
>                         name:'',
>                         //下一个可用的id值
>                         nextId:4
>                     }
>                 },
>                 methods:{
>                     addNewUser(){
>                         //往开始位置加元素用unshift
>                         this.userList.unshift({id:this.nextId,name:this.name})
>                         this.name = ''
>                         this.nextId++
>                     }
>                 }
>             }
>             const app6 = Vue.createApp(vm5)
>             app6.mount('#app6')
>             const vm4 = {
>                 data: function(){
>                     return {
>                         flag:false
>                     }
>                 }
>             }
>             const app5 = Vue.createApp(vm4)
>             app5.mount('#app5')
>             const vm3 = {
>                 data: function(){
>                     return{
>                         count:100
>                     }
>                 },
>                 methods:{
>                     addCount(){
>                         this.count += 1
>                     }
>                 }
>             }
>             const app4 = Vue.createApp(vm3)
>             app4.mount('#app4')
>             const vm2 = {
>                 data:function()
>                 {
>                     return{
>                         number:9,
>                         ok:false,
>                         message:'ABC',
>                         id:3,
>                         user:{name:'张三',}
>                     }
>                 }
>             }
>             const app3 = Vue.createApp(vm2)
>             app3.mount('#app3')
>             const vm1 = {
>                 data: function()
>                 {
>                     return{
>                         link:"http://www.baidu.com",
>                         inputValue:'请输入内容',
>                         imgSrc:'1.png',
>                         w:'500px'
>                     }
>                 }
>             }
>             const app2 = Vue.createApp(vm1)
>             app2.mount('#app2')
>             const vm={
>                 data()
>                 {
>                     return{
>                         username:'张三',
>                         gender:'男',
>                         desc:'<a href="http://www.baidu.com">百度</a>'
>                     }
>                 }
>             }
>             const app1 = Vue.createApp(vm)
>             app1.mount('#app1')
>             Vue.createApp({
>                 data(){
>                     return{
>                         message:'Hello Vue!'
>                     }
>                 }
>             }).mount('#app')
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="https://unpkg.com/vue@3"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> \{ \{message\}\}
> 
> </div>
> 
> <div id="app1">
> 
> <p>姓名:\{ \{username\}\}</p>
> 
> <p>性别:\{ \{gender\}\}</p>
> 
> <p>\{ \{desc\}\}</p>
> 
> <p v-html="desc"></p>
> 
> </div>
> 
> <div id="app2">
> 
> <a :href="link">百度</a>
> 
> <input type="text" :placeholder="inputValue">
> 
> <img :src="imgSrc" :style="\{width:w\}" alt="">
> 
> </div>
> 
> <div id="app3">
> 
> <p>\{ \{number + 1\}\}</p>
> 
> <p>\{ \{ok ? 'True' : 'False'\}\}</p>
> 
> <p>\{ \{message.split('').reverse().join('')\}\}</p>
> 
> <p :id="'list-' + id">xxx</p>
> 
> <p>\{ \{user.name\}\}</p>
> 
> </div>
> 
> <div id="app4">
> 
> <h3>count的值为: \{ \{count\}\}</h3>
> 
> <button v-on:click="addCount">+1</button>
> 
> <button @click="count+=1">+1</button>
> 
> </div>
> 
> <div id="app5">
> 
> <button @click="flag = !flag">Toggle Flag</button>
> 
> <p v-if="flag">请求成功 --- 就 v-if控制</p>
> 
> <p v-show="flag">请求成功 --- 被v-show控制</p>
> 
> </div>
> 
> <div id="app6">
> 
> <div>
> 
> <input type="text" v-model="name">
> 
> <button @click="addNewUser">添加</button>
> 
> </div>
> 
> <ul>
> 
> 
> 
> 
> 
> <li v-for="(user,index) in userList" :key="user.id">
> 
> <input type="checkbox"/>id是:\{ \{user.id\}\},姓名是: \{ \{user.name\}\}
> 
> </li>
> 
> </ul>
> 
> </div>
> 
> <script>
> 
> const vm5 = \{
> 
> data: function()\{
> 
> return\{
> 
> userList: \[
> 
> \{id: 1,name:'zhangsan'\},
> 
> \{id: 2,name:'lisi'\},
> 
> \{id: 3,name:'wangwu'\}
> 
> \],
> 
> //输入的用户名
> 
> name:'',
> 
> //下一个可用的id值
> 
> nextId:4
> 
> \}
> 
> \},
> 
> methods:\{
> 
> addNewUser()\{
> 
> //往开始位置加元素用unshift
> 
> this.userList.unshift(\{id:this.nextId,name:this.name\})
> 
> this.name = ''
> 
> this.nextId++
> 
> \}
> 
> \}
> 
> \}
> 
> const app6 = Vue.createApp(vm5)
> 
> app6.mount('\#app6')
> 
> const vm4 = \{
> 
> data: function()\{
> 
> return \{
> 
> flag:false
> 
> \}
> 
> \}
> 
> \}
> 
> const app5 = Vue.createApp(vm4)
> 
> app5.mount('\#app5')
> 
> const vm3 = \{
> 
> data: function()\{
> 
> return\{
> 
> count:100
> 
> \}
> 
> \},
> 
> methods:\{
> 
> addCount()\{
> 
> this.count += 1
> 
> \}
> 
> \}
> 
> \}
> 
> const app4 = Vue.createApp(vm3)
> 
> app4.mount('\#app4')
> 
> const vm2 = \{
> 
> data:function()
> 
> \{
> 
> return\{
> 
> number:9,
> 
> ok:false,
> 
> message:'ABC',
> 
> id:3,
> 
> user:\{name:'张三',\}
> 
> \}
> 
> \}
> 
> \}
> 
> const app3 = Vue.createApp(vm2)
> 
> app3.mount('\#app3')
> 
> const vm1 = \{
> 
> data: function()
> 
> \{
> 
> return\{
> 
> link:"http://www.baidu.com",
> 
> inputValue:'请输入内容',
> 
> imgSrc:'1.png',
> 
> w:'500px'
> 
> \}
> 
> \}
> 
> \}
> 
> const app2 = Vue.createApp(vm1)
> 
> app2.mount('\#app2')
> 
> const vm=\{
> 
> data()
> 
> \{
> 
> return\{
> 
> username:'张三',
> 
> gender:'男',
> 
> desc:'<a href="http://www.baidu.com">百度</a>'
> 
> \}
> 
> \}
> 
> \}
> 
> const app1 = Vue.createApp(vm)
> 
> app1.mount('\#app1')
> 
> Vue.createApp(\{
> 
> data()\{
> 
> return\{
> 
> message:'Hello Vue!'
> 
> \}
> 
> \}
> 
> \}).mount('\#app')
> 
> </script>
> 
> </body>
> 
> </html>