首页 > 博客列表 > vue2基础语法2与监听属性和计算属性

博主信息

博文 41

粉丝 2

访问量 37569

专题推荐

更多>

1.v-bind v-on

为元素绑定普通属性和事件
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue属性指令</title>
</head>
<body>
    <div class="app">
        <p v-bind:style="color1">{{site}}</p>
<!--        v-bind:可简化为":"，为元素绑定普通属性-->
        <p :style="color2,style3">{{site}}</p>
        <p v-bind:style = "['background : red']">{{site}}</p>
<!--        <p><a href="https://www.baidu.com" v-on:click="show">网站2</a></p>-->    <!--     v-on 指令用于绑定HTML事件    -->
<!--        prevent:修饰符，防止默认行为-->
        <p onclick="console.log(this.tagName)"><a href="https://www.baidu.com" v-on:click.prevent="show">网站2</a></p>
<!--        防止冒泡stop-->    <!--  @为v-on：简写-->
        <p onclick="console.log(this.tagName)"><a href="https://www.baidu.com" @click.prevent.stop="show">网站2</a></p>
<!--        事件传参 -->
        <button @click.stop="calc($event,10,1)">计算10 + 1 =  ？ </button>
        {{result}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '.app',
            data : {
                site : 'hello',
                color1 : 'color : red',
                color2 : 'color : green',
                style3 : 'background : yellow',
                result : 0,
            },
            //事件方法
            methods: {
                show() {
                    // this -->vue实例
                    console.log(this);
                   // debugger;
                },
                calc(ev,x,y) {
                    this.result = x+y;
                }
            }
        });
    </script>
</body>
</html>

效果

2.v-model

双向绑定
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定v-model</title>
</head>
<body>
<div class="app">
    <p>模型中的数据：{{site}}</p>
    <p>双向绑定 <input type="text" :value="site" @input="site=$event.target.value"></p>
<!--    vue双向绑定v-model-->
    <hr>
    <p>双向绑定/实时更新 <input type="text"  v-model="site"></p>
    <hr>
<!--    延迟更新绑定，修饰符：lazy-->
    <p>双向绑定/延迟更新绑定 <input type="text"  v-model.lazy="site"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
       el : '.app',
       data : {
           site : 'hello'
       },
    });
</script>
</body>
</html>

效果

3.v-for,v-if,v-show

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染,v-for,v-if,v-show</title>
</head>
<body>
<div class="app">
<!--遍历数组-->
    <ul>
        <li>{{items[0]}}</li>
        <li>{{items[1]}}</li>
        <li>{{items[2]}}</li>
        <hr>
<!--        v-for = for of-->
<!--        :key 自定义键属性，主要是干扰diff算法-->
        <li v-for="(item,index) in items" :key="index">{{index}}=>{{item}}</li>
        <hr>
<!--        遍历对象-->
        <li v-for="(item,prop,index) in user" :key="prop">{{prop}}=>{{item}}</li>
        <hr>
<!--        遍历对象数组-->
        <li v-for="(item,index) in users" :key="index">{{item.email}}=>{{item.name}}</li>
    </ul>
    <p v-if="flag">{{msg}}</p>
    <button @click="flag = !flag" v-text="tips = flag ? `影藏` : `显示`"></button>
    <p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
    <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
    <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
    <p v-else-if="point >= 4000 && point < 5000">{{grade[3]}}</p>
    <p v-else-if="point >= 5000">{{grade[4]}}</p>
    <p v-else>{{grade[5]}}</p>
    <p v-show="status">前端即将结束</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // v-for : (循环变量，索引/键) in/of :key
    new Vue({
        el : '.app',
        data (){
            return  {
                //数组
                items : ['深圳','东莞','广州'],
                //对象
                user : {
                    name : '张飞',
                    email : '306032534@qq.com'
                },
                //对象数组
                users　: [
                    {name : '张飞', email : '306032534@qq.com'},
                    {name : '刘备', email : '2571767701@qq.com'}
                ],
                flag : true,
                msg  : 'hello',
                tips : '影藏',
                grade : ['纸片会员','木头会员','石块会员','铁片会员','钢板会员','非会员'],
                point : 2000,
                status : false
            }
        }
    })
</script>
</body>
</html>

效果

4.键盘修饰符 v-on:keyup=”submit()”

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘修饰符：todolist</title>
</head>
<body>
<div class="app">
    <input type="text" @keyup.enter ='submit($event)'>
<!--    enter:回车键的修饰符-->
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el : '.app',
        data() {
            return {
                list : []
            }
        },
        methods : {
            submit(ev) {
                // console.log(ev.key)
                // if(ev.key === 'Enter') {
                //     this.list.unshift(ev.target.value);
                //     ev.target.value = null;
                // }
                this.list.unshift(ev.target.value);
                ev.target.value = null;
            }
        }
    })
</script>
</body>
</html>

效果

5.计算属性与监听属性

计算属性
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div class="app">
    <p> 数量：    <input type="number" v-model="num" style="width:5em" min="0" ></p>
    <p>单价：{{price}}</p>
<!--    <p>金额： {{num * price}}</p>-->
    <p>金额：{{amount}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   const vm =  new Vue({
        el : '.app',
        data() {
            return {
                num : 0,
                price : 50,
                res : 0
                // 这里只能赋初值
            }
        },
        // 计算属性
        computed : {
            amount :  {
                //访问器属性get（）
                get() {
                    return this.num * this.price
                },
                set(value) {
                    if (value>=2000) this.price = 40;
                }
            },
        },
        methods : {
        }
    })
   vm.amount=2000;
</script>
</body>
</html>

效果

监听属性
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器属性</title>
</head>
<body>
<div class="app">
    <p> 数量：    <input type="number" v-model="num" style="width:5em" min="0" :max="max"></p>
    <p>单价：{{price}}</p>
    <!--    <p>金额： {{num * price}}</p>-->
    <p>金额：{{res}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm =  new Vue({
        el : '.app',
        data() {
            return {
                num : 0,
                price : 50,
                res : 0,
                // 设置库存最大值
                max : 100
                // 这里只能赋初值
            }
        },
        watch : {
            // 是用来监听某一个属性值的变化，属性名要和data字段中的变量名相同
            // 例如，我要监听"num"变量的变化
            //num(新的值，原来的值)
            num(newVal, oldVal) {
                console.log(newVal,oldVal);
                // this.res = this.num * this.price;
                // this.num -->newVal,this.price
                this.res = newVal * this.price;
                if (newVal >= 20)  {
                    this.max = newVal;
                    alert('库存不足，请进货');
                }
            }
        }
    })
</script>
</body>
</html>

效果

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之类与继承

2021-05-07 22:53:35