首页<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co2.要求新增2个div，使用双向绑定数据的方式分别记录成功之后和不成功的关键信息。要求：（1）记录成功信息的div为绿色、记录不成功信息的div为橙色；（2）使用“template模板”的方式。（15分）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co2.要求新增2个div，使用双向绑定数据的方式分别记录成功之后和不成功的关键信息。要求：（1）记录成功信息的div为绿色、记录不成功信息的div为橙色；（2）使用“template模板”的方式。（15分）

时间: 2023-10-07 10:05:08 浏览: 190

好的，以下是基于Vue.js实现的代码示例： ```html <template> <div> <form @submit.prevent="submitForm"> <label> 用户名： <input type="text" v-model="username"> </label> <label> 密码： <input type="password" v-model="password"> </label> <button type="submit">登录</button> </form> <div v-if="success" class="success">{{ message }}</div> <div v-else-if="message" class="fail">{{ message }}</div> </div> </template> <script> export default { data() { return { username: '', password: '', success: false, message: '' }; }, methods: { submitForm() { // 这里是模拟后端请求的逻辑，可以根据实际情况修改 if (this.username === 'admin' && this.password === '123456') { this.success = true; this.message = '登录成功！'; } else { this.success = false; this.message = '用户名或密码错误！'; } } } }; </script> <style> .success { background-color: green; } .fail { background-color: orange; } </style> ``` 以上代码中，我们使用了Vue.js的双向绑定来记录用户名和密码，使用了template模板来实现成功和失败信息的显示，并使用了v-if和v-else-if指令来根据不同的情况显示不同的信息。同时，我们在CSS中设置了不同颜色的背景来区分成功和失败信息。

阅读全文