Vue快速入门，常用指令，生命周期

news/2024/10/17 5:04:59/

Vue常用指令

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app" align="center"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

Vue生命周期

http://www.ppmy.cn/news/60643.html

Vue快速入门，常用指令，生命周期

相关文章

jQuery引入----练习

机器人抓取检测——Dex-Net

【6D位姿估计】Point Pair Feature (PPF)

Java每日一练(20230507) 组合总和、缺失的正数、单词搜索II

虚函数、静态绑定和动态绑定

【LeetCode】9，回文数。 难度等级：简单。巧妙解法很多，值得推敲。

【网络进阶】WebSocket协议

CypherRat使用

【LeetCode】9，回文数。难度等级：简单。巧妙解法很多，值得推敲。