收藏
PHPz批改状态：合格
老师批语：
代码：
<!DOCTYPE html><html lang="zh-CN"><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><style>.te {color: red;}.bg {background-color: yellow;}</style></head><body><!-- 插值 --><h1 class="title">{{message}}</h1><hr /><!-- 挂载点 --><div class="app"><p>挂载点：你好，{{username}}</p></div><hr /><div class="vhtml"><p>V-HTML: 你好，<span v-html="username"></span></p></div><hr /><div class="vtext"><p>V-TEXT：你好， <span v-text="username"></span></p></div><hr /><div class="hn"><!-- 1. 行内: style --><p :style="{color:textColor,backgroundColor: bg}">XXXXX.XXX</p><p :style="[base, custom]">XXX.XXX</p><!-- 2. 类样式: class --><p :class="te">你好，小小明</p><!-- classList --><p :class="{te: isActive}">你好，小小红</p><!-- v-bind:简化为冒号 --><p :class="['te', 'bg']">Hello 王老师</p><p :class="[mycolor, mybgc]">Hello 王老师</p></div><script>const apps = Vue.createApp({data() {return {message: "Hello 大家吃了吗",};},});apps.mount(document.querySelector(".title"));// 挂载点const app = Vue.createApp({data() {return {username: "小明同学",};},}).mount(".app");// v - htmlconst vhtml = Vue.createApp({data() {return {username: "",};},}).mount(".vhtml");vhtml.username = '<i style="color:red">张同学</i>';// v-textconst vtext = Vue.createApp({data() {return {username: "小蓝同学",};},}).mount(".vtext");const hn = Vue.createApp({data() {return {textColor: "green",bgc: "wheat",base: {border: "1px solid",background: "lightgreen",},custom: {color: "white",padding: "15px",},active: "te",isActive: true,mycolor: "te",mybgc: "bg",};},}).mount(".hn");</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
