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

本文链接：https://blog.csdn.net/2201_75960169/article/details/133466235

<!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>