收藏
天蓬老师批改状态：合格
老师批语：vue中的指令众多, 且不同的版本之间有些差异, 要留意
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="../lib/vue.js"></script><title>模板语法</title></head><body><div class="app"><p>{{words}}</p><!-- v-: vue指令的前缀,以html自定义属性的方式书写 --><p v-html="code"></p><p>{{10*30}}</p><p>{{true ? '心情好' : '难过'}}</p><p>{{'ABCD'.split('').reverse().join('')}}</p><p>{{'Hello World'}}</p></div><script>const vm = new Vue({el: ".app",data: {words: "Hello php.cn",code: "<strong>朱老师</strong>",},});</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>计算属性和过滤器</title><script src="../lib/vue.js"></script></head><body><div class="app"><p>{{reverseWords}}</p><p>{{words | wordsToCase | substring}}</p></div><script>const vm = new Vue({el: ".app",data: {words: "hello php.cn",},// 计算属性computed: {reverseWords() {return this.words.split("").reverse().join("");// 先拆分、再反转、再合并},},// 过滤器filters: {wordsToCase(str) {return str.toUpperCase();},substring: (str) => str.substr(2, 3),// substr:从第三位开始取三个元素},});</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>侦听器属性</title><script src="../lib/vue.js"></script></head><body><p>小小加法器</p><div class="app"><input type="number" v-model="add1" /> +<input type="number" v-model="add2" /> = <span>{{res}}</span></div><script>const vm = new Vue({el: ".app",data: {add1: 0,add2: 0,res: 0,},// 侦听器属性/*watch: {add1(newVal, oldVal) { // 这个地方等同于 add1: function(newVal, oldVal)......// console.log(// "new = %d, old = %d",// parseFloat(newVal),// parseFloat(oldVal)// );// console.log("new = %d, old = %d", newVal * 1, oldVal * 1);this.res = this.newVal * 1 + this.oldVal * 1;},add2(newVal, oldVal) {this.res = this.newVal * 1 + this.oldVal * 1;},},*/// 公共方法methods: {// 事件方法或公共函数add(newVal, addend) {this.res = this.newVal * 1 + this.oldVal * 1;// 通过 *1的方式进行字符串转数字。},},watch: {add1(newVal) {this.add(newVal, this.add2);},add2(newVal) {this.add(newVal, this.add1);},},});</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>侦听器属性2</title><script src="../lib/vue.js"></script></head><body><p>小小加法器</p><div class="app"><input type="number" v-model="add1" /> +<input type="number" v-model="add2" /> = <span>{{res}}</span></div><script>const vm = new Vue({el: ".app",data: {add1: 0,add2: 0,},computed: {res() {return this.add1 * 1 + this.add2 * 1;},},});</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式的修改</title><script src="../lib/vue.js"></script><style>.active {color: red;}.bigger {font-size: 1.5rem;}</style></head><body><div class="app"><!-- <p class="active">Hello World</p> --><!-- 对象字面量 --><!-- <p v-bind:class="{active: isActive, bigger: isBigger}">Hello World</p> --><!-- 对象字面量简化 --><!-- <p v-bind:class="style1">Hello World</p> --><!-- 数组 --><!-- <p v-bind:class="[active, bigger]">Hello World</p> --><!-- 字面量 --><!-- <p v-bind:class="['active', 'bigger']">Hello World</p> --><!-- <p style="color: red">Hello World</p> --><!-- v-bind:style="" --><!-- <p style="color: violet; font-size: 2rem">Hello World</p> --><!-- <p v-bind:style="`color: violet; font-size: 2rem`">Hello World</p> --><!-- <p v-bind:style="{color:color, fontSize:fontSize}">Hello World</p> --><p :style="{color:color, fontSize:fontSize}">Hello World</p><!-- 这个地方是简写，将v-bind省略掉了 --><p :class="'active'">php.cn</p></div><script>const vm = new Vue({el: ".app",data: {isActive: true,isBigger: true,style1: {active: () => this.isActive,bigger: () => this.isBigger,},active: "active",bigger: "bigger",// stylecolor: "green",fontSize: "2rem",},});</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>条件与显示</title><script src="../lib/vue.js"></script></head><body><div class="app"><p v-if="score > 90 && score <=100">学帝</p><p v-else-if="score >= 80 && score < 90">学霸</p><p v-else-if="score >= 60 && score < 80">学渣</p><p v-else>留级</p><hr /><button type="button" v-on:click="handle">{{tips}}</button><p v-show="flag">vue是一个语法简洁的渐进式前端框架</p></div><script>const vm = new Vue({el: ".app",data: {score: 95,flag: true,tips: "隐藏",},methods: {handle() {this.flag = !this.flag;// 上面这样设置后，等于click一次为显示，一次为隐藏。两者动态切换了。this.tips = this.flag ? "隐藏" : "显示";},},});// if (){}: v-if// if (){} else {} : v-else// if (){} else if () {} else {}: v-else-if</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="../lib/vue.js"></script><title>列表渲染</title></head><body><div class="app"><!-- v-for="item of arr" --><ul><!-- 数组 --><li v-for="color of colors">{{color}}</li></ul><hr /><ul><!-- 对象--><li v-for=" (item,key) of course">{{key}} : {{item}}</li></ul><hr /><ul><!-- 对象数组：每个元素师对象--><li v-for="user of users">{{user.name}} ( {{user.email}} )</li></ul></div><script>const vm = new Vue({el: ".app",data: {// arraycolors: ["red", "green", "blue"],// objectcourse: { name: "vue基础", lecture: "朱老师" },// obj-arrusers: [{ name: "admin", email: "a@qq.com" },{ name: "peter", email: "p@qq.com" },],},});// 遍历数组// const arr = ["html", "css", "js"];// console.log(Object.keys(arr));// Object.keys(arr).forEach((item) => console.log(arr[item]));// 遍历对象// const obj = { id: 1, name: "peter", email: "peter@qq.com" };// Object.keys(obj).forEach((item) => console.log(obj[item]));// 遍历对象数组const objArr = [{ id: 1, name: "admin" },{ id: 2, name: "jack" },];console.log(Object.keys(objArr));let lis = "";// 或者// for (item of objArr) {// console.log(item.id, item.name);// }</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
