收藏
PHPz批改状态：合格
老师批语：
<!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="https://unpkg.com/vue@next"></script><!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> --><style>.active {color: orange;}.bgc {background-color: blue;}</style></head><body><div id="firstVue"><!-- 页面模板化：模板字面量 --><p>{{content}}</p><!-- v-text 相当于textContent --><p v-text="name"></p><!-- v-html 相当于innerHTML --><p v-html="address"></p><div><!-- 行内样式 v-bind:style --><!-- v-bind 可以简写成 : --><p v-bind:style="{color:textColor,}">我是行内样式</p><p v-bind:style="mycolor">我是行内样式2</p><p v-bind:style="[mycolor]">我是行内样式3</p></div><div><!-- class 类样式 --><p v-bind:class="['active']">我是class样式</p><p v-bind:class="[myactive]">我是class样式2</p><p v-bind:class="{active:flag}">我是class样式3</p><p class="bgc">我是原生class样式4</p></div><div><!-- 数据双向绑定 --><!-- 原生js --><p><input type="text" name="" id="" oninput="this.nextElementSibling.textContent = this.value" /><span></span></p><!-- Vue双向数据绑定 v-on --><!-- $event 事件对象, 在vue不能直接用event --><!-- <p><input type="text" style="background-color: gray" v-on:input="comment=$event.currentTarget.value" v-bind:value="comment" /><span>{{comment}}</span></p> --><!-- Vue双向数据绑定 v-on --><!-- $event 事件对象, 在vue不能直接用event --><!-- 简写v-on: === @ ; v-bind: === : --><!-- <p><input type="text" style="background-color: yellow" @input="comment=$event.currentTarget.value" :value="comment" /><span>{{comment}}</span></p> --><!-- 简写 v-model === v-on:input="comment = $event.currentTarget.value" --><!-- <p><input type="text" style="background: orange" v-model="comment" :value="comment" /> <span>{{comment}}</span></p> --><!-- 延迟绑定：修饰符 .lazy --><p><input type="text" style="background: orange" v-model.lazy="comment" :value="comment" /> <span>{{comment}}</span></p></div></div><script>const app = Vue.createApp({data() {return {content: "这是一个Vue",name: "这是一个v-text",address: "<i>这是一个v-html</i>",textColor: "red",mycolor: {color: "red",},myactive: "active",flag: true,comment: "",};},});app.mount("#firstVue");</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
