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>

效果图：