<!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"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.2/vue.global.js"></script> <title>Document</title> <style> .active { background-color: salmon; } .static { font-size: 32px; } </style> </head> <body> <div id="app"> 一、插值 <p>Using v-html directive:<span v-html="rawHtml"></span></p> <!--原生html需要使用v-html引用--> <p>{{msg}}</p> <!--双大括号会将数据解释为普通文本--> <p><input type="text" v-model="msg"></p> <!--v-model實現表單元素的數據綁定 v-model本质上是一个语法糖。上面代码本质上是<input :value="msg" @input="msg = $event.target.value"> --> <p><input :value="msg" @input="msg = $event.target.value"></p> <p><a v-bind:href="link">{{site}}</a></p> <!-- v-bind:属性名 简写格式 :属性名,所以这里简写为:href --> <p><a :href="link">{{site}}</a></p> <!-- 指令的意思是：“将这个元素节点的 href attribute 和 Vue 实例的 link property 保持一致”。 --> <p> <input type="text" v-model="site"> <input type="text" v-model="link"> </p> <p> {{ number + 1 }}</p> <p> {{ ok ? 'YES' : 'NO' }}</p> <p> {{ msg.split('').reverse().join('') }}</p> <!-- 文本倒序 --> <div v-bind:id="'list-' + id">{{id}}</div> <!-- 这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，不能是js语句，所以下面的例子都不会生效。 --> 二、样式绑定 <div class="static" :class="{ active: isActive, 'text-danger': hasError}">zhangsan</div> <!-- 由于hasError为false，渲染结果为：<div class="static active"></div> --> <div class="static" :class="classobj">lisi</div> <!-- 也可以定义一个class集合，再调用，跟上面效果相同 --> <div :class="[activeClass, errorClass]">wangwu</div> <!-- 我们可以把一个数组传给 :class，以应用一个 class 列表,渲染的结果为：<div class="active text-danger"></div> --> <div :class="[{ active: isActive }, errorClass]">mazi</div> <!-- 数组语法中也可以使用对象语法 --> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">hello</div> <div :style="styleObject">hello</div> <div :style="[activeColor, styleObject]">hello</div> <!-- style也可以这样处理 --> 三、条件渲染 <div> <h3>if-else</h3> <div v-if="age>18">大人电影</div> <div v-else>青少年电影</div> <input type="text" v-model="age"> <!-- 提供一个输入框，改变age的值，可以切换成人和青少年电影 --> <h3>if-else-if</h3> <div v-if="score>90">优秀</div> <div v-else-if="score>80">良好</div> <div v-else-if="score>60">及格</div> <div v-else>不及格</div> <input type="text" v-model="score"> <h1 v-show="age>18">Hello!</h1> <!-- v-show和v-if的比较 --> <!-- 相同点：v-if与v-show都可以动态控制dom元素显示隐藏 不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。 --> 四、循环渲染 <ul> <!-- 针对数组的循环 --> <li v-for="stu,index in students">序号：{{index}} 姓名：{{stu.name}} 年龄：{{stu.age}}</li> <!-- v-for 还支持一个可选的第二个参数，即当前项的索引。 --> </ul> <ul> <li v-for="value,key in student">{{key}} ::: {{value}}</li> <!-- 针对字典可以做key，value的循环 --> </ul> </div> </div> <script> const Counter = { data() { return { msg: "hello world", rawHtml: "<a href=''>hello</a>", site: "百度", link: "https://www.baidu.com", number: 100, ok: "NO", id: 3, isActive: true, // 控制样式是否显示，若为true则显示 hasError: false, classobj: { active: this.isActive && !this.error, // 我们也可以在这里绑定一个返回对象的计算属性 'text-danger': this.error && this.error.type === 'fatal' }, activeClass: 'active', errorClass: 'text-danger', activeColor: 'green', fontSize: 30, styleObject: { color: 'red', fontSize: '13px' }, age: 10, score: 80, students: [{ "name": "zhangsan", "age": 22 }, { "name": "lisi", "age": 24 }, { "name": "wangwu", "age": 21 }], student: { "name": "yuan", "age": 22 } } } } vm = Vue.createApp(Counter).mount('#app') </script> </body> </html>