Vue——插值操作、动态绑定属性

鹿蹊zz

已于 2022-07-26 23:58:50 修改

阅读量2k

点赞数 4

分类专栏： Vue前端框架整理文章标签： javascript 前端 vue.js 前端框架

于 2022-07-26 23:45:02 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125999136

版权

本文详细介绍了Vue.js中的插值操作，包括Mustache语法、v-for列表展示、计数器案例以及v-once、v-html、v-text、v-pre和v-cloak等常用指令的用法。同时，还深入讲解了动态绑定属性，如v-bind指令、动态绑定class和style，展示了如何在Vue中灵活地操作DOM元素的属性。

摘要由CSDN通过智能技术生成

2. v-bind动态绑定class(对象语法)

3.v-bind和v-for结合

4 v-bind动态绑定class(数组用法)

5.v-bind动态绑定style(对象语法)

6.v-bind动态绑定style(数组语法)

一、插值操作

1.Mustache语法

mustache是胡须的意思，因为{ {}}像胡须，又叫大括号语法。

在vue对象挂载的dom元素中，{ {}}不仅可以直接写变量，还可以写简单表达式。

<body>    
    <div id="app">
        <h2>{
  {message}}</h2>
        <h2>{
  {message}},world</h2>
     <!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
        <h2>{
  {firstName+'-'+lastName}}</h2>
        <h2>{
  {firstName}}-{
  {lastName}}</h2>
        <h2>{
  {firstName+lastName}}</h2>
        <h2>{
  {count*2}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: '#app',
            data(){
                return{
                    message: 'hello',
                    firstName:'zhang',
                    lastName:'san',
                    count:2
                }        
            }
        })
    </script>
</body>

2. vue列表的展示（v-for）

开发中常用的数组有许多数据，需要全部展示或者部分展示，在原生JS中需要使用for循环遍历依次替换div元素，在vue中，使用v-for可以简单遍历生成元素节点。

<div id='app'>
        <!-- <h2>{
  {todolists}}</h2> -->
        v-for="数组或对象中的每一个值  in/of  数组或对象本身"

        <!-- <h2 v-for="item in todolists">{
  {item}}</h2> -->
        <!-- <h2 v-for="item of todolists">{
  {item}}</h2> -->

        <!-- <h2 v-for="item of obj">{
  {item}}</h2> -->
        <!-- <h2 v-for="item in obj">{
  {item}}</h2> -->

        <h2 v-for="item of obj2">{
  {item.a}}{
  {item.b}}{
  {item.c}}</h2>
        <!-- <h2 v-for="item in obj2">{
  {item.a}}{
  {item.b}}{
  {item.c}}</h2> -->
        <ul>
            <li v-for="item of obj2">{
  {item.a}}{
  {item.b}}{
  {item.c}}</li>
        </ul>

        <!-- 添加索引值    动态绑定key值，涉及diff算法 可以为index、id,
            在将来的项目中写v-for是需要加上:key 它的值可以写索引,最好写数据中的id值-->
        <h2 v-for="(item,index) in todolists" :key="index">{
  {item}}--{
  {index}}</h2>

        <h2 v-for="item in obj2" :key="item.id">{
  {item.a}}{
  {item.b}}{
  {item.c}}</h2>
			<!-- diff算法 -->
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    todolists: ['篮球', '排球', '羽毛球', '足球'],
                    obj: {
                        a: '张三',
                        b: '李四',
                        c: '王五'
                    },
                    obj2: [{
                        id:1,
                        a: '张三'
                    }, {
                        id:2,
                        b: '李四'
                    }, {
                        id:3,
                        c: '王五'
                    }]
                }

            }
        })
    </script>

item表示当前遍历的元素，index表示元素索引，为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

3. vue案例-计数器

使用vue实现一个小计数器，点击+按钮，计数器+1，使用-按钮计数器-1。

定义vue对象并初始化一个变量count=0

定义两个方法add和sub，用于对count++或者count--

定义两个button对象，给button添加上点击事件

在vue对象中使用methods表示方法集合，使用v-on:click的关键字给元素绑定监听点击事件，给按钮分别绑定上点击事件，并绑定触发事件后回调函数add和sub。也可以在回调方法中直接使用表达式。例如：count