Vue侦听属性代码

最新推荐文章于 2022-12-01 23:09:58 发布

m0_49928665

最新推荐文章于 2022-12-01 23:09:58 发布

阅读量104

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_49928665/article/details/117283006

版权

本文介绍了Vue中如何使用侦听属性，并展示了具体代码，包括内联样式和主体代码，用于实现标签非空验证，当标签为空时显示红色标识。

摘要由CSDN通过智能技术生成

Vue侦听属性代码

最终效果图

在这里插入图片描述

描述

label标签不能为空，为空出现红色标识
下面

标签为总价格，
以下是内联样式代码，写在头部

<style>
        .warn{
            color: red;
        }
    </style>

以下是主体代码

<body>
<div id="app">
        <h1>石书浩家的商店</h1>
    <div>
        <label for="title">商品名称</label>
        <input id="title" v-model="title">
        <span :class="{warn:titleValue}">商品名称不能为空</span>
    </div>
    <div>
        <label for="price">商品价格</label>
        <input id="price" v-model="price">
        <span :class="{warn:priceValue}">商