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

发布于：2023-10-08 ⋅ 阅读:(116) ⋅ 点赞:(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>
            <!-- Vue会倾向于重用标签,我们没有给li标签加上唯一的id,但是标签产生变化了,这就导致我们列表变化后,选中对象变化了 -->
            <!-- 这个key唯一表示最好使用数据库中查询出的主键来充当 -->
            <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>

            <!-- Vue会倾向于重用标签,我们没有给li标签加上唯一的id,但是标签产生变化了,这就导致我们列表变化后,选中对象变化了 -->

            <!-- 这个key唯一表示最好使用数据库中查询出的主键来充当 -->

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

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布