项目第七章--项目所需的Vue知识_html-js-css

1.v-if v-else

<body>

<div id="app">
    <div v-if="Math.random() >0.5">大于0.5div>
    <div v-else> 小于0.5div>
div>

<script>
    new Vue({
        //绑定到那个元素
        el:'#app',

    })
script>

body>

测试：刷新结果改变：小于0.5

2.v-for循环指令

<body>

<div id="app">
    <ol>
        <li v-for=" user in users ">
            {{user.name}}
        li>
    ol>
div>

<script>
    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{

            users:[
                {name:"小明"},
                {name:"小红"},
                {name:"小黄"},
            ]
        }

    })
script>

body>

测试：

3.v-model

<body>

<div id="app">
    <p>{{phone}}p>
    //将输入数据绑定到scrpt 下的 data 下的phone属性
    手机号<input v-model="phone"/>
div>

<script>
    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{

            phone:"000",
        }

    })
script>

body>

测试：默认为000 输入123 后上面的显示也一起改变

4.v-on

<body>

<div id="app">
    <p>{{title}}p>
    <button v-on:click="changeTitle">改变标题button>
div>

<script>
    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{

            title:"面试专题"
        },

        //自定义方法
        methods: {
            changeTitle:function(){
                this.title="2022.5.14"+this.title;
            }
                }

    })
script>

body>

测试：

5.缩写v-bind v-on

<body>

<div id="app">
    <p>{{title}}p>

    
    <button @click="changeTitle">改变标题button>

    <br>
    
	
    
    <a :href="url">点击跳转a>
div>

<script>
    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{

            title:"面试专题",
            url:"http://www.baidu.com/",
        },

        //自定义方法
        methods: {
            changeTitle:function(){
                this.title="2022.5.14"+this.title;
            }
                }

    })
script>

body>

测试：点击跳转后跳转百度下面不在演示

6.component组件

<body>

<div id="app">
    <ys_count>ys_count>
div>

<script>
    //第一个属性'ys_count'为组件别名
    Vue.component('ys_count',{

        data:function(){
            return {
                count:0,
            }
        },
        
        //模板
        template: ''
    });

    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{
        },

        //自定义方法
        methods: {  
                }

    })
script>

body>

测试：

点击多次

7.prop向子组件传值

<body>

<div id="app">
    <ys_count message="ys测试">ys_count>
    <ys_count message="second 测试">ys_count>
div>

<script>
    Vue.component('ys_count',{

        props:{
            message:{
                type:String
            }
        },

        data:function(){
            return {
                count:0,
            }
        },

        template: ''
    });

    new Vue({
        //绑定到那个元素
        el:'#app',

        //数据源
        data:{
        },

        //自定义方法
        methods: {  
                }

    })
script>

body>

测试：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/940075.html

项目第七章--项目所需的Vue知识

发表评论

评论列表（0条）