Vue3 学习笔记03-文本插值{{ }}、属性绑定v-bind、v-on 指令(事件处理)、v-if条件语句、v-for
1 文本插值与v-html 指令
{{...}} 标签的内容将会被替代为对应组件实例中 rawHtml 属性的值，如果 rawHtml 属性的值发生了改变，{{...}} 标签内容也会更新。
使用 v-html 指令用于输出 html 代码。
案例：
<template> <p>使用双大括号的文本插值: {{ rawHtml }}</p> <p>使用 v-html 指令: <span v-html="rawHtml"></span></p> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default{ name:'App', data(){ return{ rawHtml: '<span style="color: red">这里会显示红色！</span>' } } } </script>
效果图：
2. v-bind指令及其缩写
参数在v-bind指令后，用冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<template> <p><a v-bind:href="url">菜鸟教程</a></p> </template> <script> export default{ name:'App', data(){ return{ url: 'https://www.runoob.com' } } } </script>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
v-bind HTML 属性中的值应使用 v-bind 指令。
v-model 实现值的双向绑定
<template> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> </template> <style> .class1{ background: #444; color: #eee; } </style> <script> import HelloWorld from './components/HelloWorld.vue' export default{ name:'App', data(){ return{ use: false } } } </script>
效果图：
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
注意：若页面没有变化，可能是因为缓存的原因，建议刷新浏览器，重试。
3.v-on指令
v-on 指令，它用于监听 DOM 事件。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<template> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </template> <script> export default{ name:'App', data(){ return{ message: 'Runoob!' } }, methods:{ reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } </script>
效果图：
v-on 缩写：
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
5.v-if指令
<template> <p v-if="seen">现在你看到我了</p> </template> <script> export default{ name:'App', data(){ return{ seen: true /* 改为false，信息就无法显示 */ } }, } </script>
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<div id="app"> <template v-if="seen"> <h1>网站</h1> <p>Google</p> <p>Runoob</p> <p>Taobao</p> </template> </div>
v-else指令
可以用 v-else 指令给 v-if 添加一个 "else" 块：
<template> <div v-if="Math.random() > 0.5"> 随机数大于 0.5 </div> <div v-else> 随机数小于等于 0.5 </div> </template> <script> export default{ name:'App', data(){ return{ } }, } </script>
效果图：
v-else-if
v-else-if 即 v-if 的 else-if 块，可以链式的使用多次：
<template> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </template> <script> export default{ name:'App', data(){ return{ type: "E" } }, } </script>
效果图：
6.v-for指令
v-for 指令可以绑定数组的数据来渲染一个项目列表。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
建议尽可能在使用 v-for 时提供 key。
6.1 v-for 迭代数组
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<template> <!-- <ol> 标签定义有序列表 --> <ol> <!-- <li> 标签定义列表项目。 --> <li v-for="site in sites" :key="site.index"> {{ site.text }} </li> </ol> </template> <script> export default{ name:'App', data(){ return{ sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }, } </script>
效果图：
6.2 v-for 还支持一个可选的第二个参数，参数值为当前项的索引：
<template> <ol> <li v-for="(site,index) in sites" :key="index"> {{index}}-{{ site.text }} </li> </ol> </template> <script> export default{ name:'App', data(){ return{ sites: [ { text: 'Google' }, { text: 'Runoob' }, { text: 'Taobao' } ] } }, } </script>
效果图：
6.3 v-for 迭代对象
第1个参数为value值，第2个参数为为键名key
<template> <ul> <li v-for="(value,key) in object" :key="value"> {{key}} {{ value }} </li> </ul> </template> <script> export default{ name:'App', data(){ return{ object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }, } </script>
效果图：
6.4 v-for 迭代整数
v-for 也可以循环整数
<template> <ul> <li v-for="n in 5" :key="n"> {{ n }} </li> </ul> </template> <script> export default{ name:'App', data(){ return{ } }, } </script>
效果图：
7. 综合案例
<template> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!-- 索引为 1 的设为默认值，索引值从0 开始--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>您选中了:{{selOption}}</div> </template> <script> export default{ name:'App', data() { return { selOption: "Runoob", sites: [ {id:1,name:"Google"}, {id:2,name:"Runoob"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("你选中了"+this.selOption); } } } </script>
效果图：
