收藏
天蓬老师批改状态：合格
老师批语：
<body><div class="app" onclick="alert(this.tagName)"><p>用户名：{{username}}</p><p>100 + 200 = {{100+ 200}}</p><p>{{flag ? '前往取经' : '呆在流沙河'}}</p>3<p>-------------------------- v-text,v-once,v-html ----------------------------</p><p v-text="plan1"></p><p v-once="plan1"></p><p v-text="plan2"></p><p v-html="plan2"></p><p>--------------- v-bind,v-on, 绑定style属性, 绑定类class属性 --------------------</p><p v-bind:style="style1">用户名：{{username}}</p><p :style="`color:pink`">用户名：{{username}}</p><p :class="`blue bigger`">计划任务：{{plan1}}</p><p :class="class1">计划任务：{{plan3}}</p><p :class="{blue: isBlue, bigger: isBigger}">计划任务：{{plan1}}</p><p><a href="https://www.php.cn" v-on:click="show"> 显示网站名称 1 (会跳转到网站) </a></p><!-- .prevent, 阻止a标签的默认跳转行为 --><p><a href="https://www.php.cn" @click.prevent="show"> 显示网站名称 2 (不跳转到网站) </a></p><!-- .stop, 阻止冒泡 --><p><a href="#" @click.stop="show">显示网站名称 3 (阻止冒泡)</a></p><!-- .once 仅允许执行一次 --><p><a href="#" @click.once="show">显示网站名称 4 (仅执行一次)</a></p></div><script src="vue.js"></script><script>const vm = new Vue({// 挂载点el: '.app',// 数据注入data: {username: "卷帘大将",plan1: '高老庄取媳妇',plan2: '大闹盘丝洞',plan3: '智取黑风岭',flag : true,style1: 'color:red',class1: 'blue bigger',isBlue: true,isBigger: false,site: 'php中文网',},methods: {show() {// this: 就是当前的vue实例对象alert(this.site);}}});vm.plan2 = '<em style="color:red">大闹盘丝洞</em>';</script></body>
<body><div class="app"><p>---------------------- v-model，双向数据绑定 ----------------------------</p><p>来者何人：{{username}}</p><p>数据类型：{{typeof username}}</p><p>双向数据绑定：<input type="text" v-model="username"></p><!--懒加载--><p>双向数据绑定（懒加载）：<input type="text" v-model.lazy="username"></p><!--转数字类型输出--><p>双向数据绑定（数字类型输出）：<input type="text" v-model.number="username"></p><p>--------------------------- v-for 循环 ----------------------------------</p><!-- key: 可以干预diff算法 --><!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 --><!-- key只能是整数或不重复的字符串 --><ul><li v-for="(item, index) in items" :key="index">{{index}}---{{item}}</li></ul><ul><li v-for="(item, prop, index) in user" :key="prop">{{index}}---{{prop}}---{{item}}</li></ul><ul><li v-for="(user, index) in users" :key="user.id">{{user.id}}---{{user.name}}---{{user.email}}</li></ul><span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span></div><script src="vue.js"></script><script>const vm = new Vue({// 挂载点el: '.app',// 数据注入data: {username: "卷帘大将",// 数组items: ["合肥", "苏州", "杭州"],// 对象user: {name: "天蓬",email: "tp@php.cn",},// 对象数组, 数据表的查询结果就是一个二个这样的二维的JSONusers: [{ id: 1, name: "天蓬", email: "tp@php.cn" },{ id: 2, name: "灭绝", email: "mj@php.cn" },{ id: 3, name: "西门", email: "xm@php.cn" },],}});</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
