（第三天）Vue插值操作，v-bind语法

最新推荐文章于 2023-05-23 18:03:09 发布

帅气的刘某人

最新推荐文章于 2023-05-23 18:03:09 发布

阅读量457

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41581154/article/details/109212589

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1：插值操作

Moustache语法：{{message}}不仅仅可以定义变量、常量还能进行数值运算、字符串拼接等操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<script src="../js/vue.js"></script>
  <div id="app">
    {{message}}
    <h1>{{message}},西巴</h1>
    <!--Mustache语法 不仅仅可以写值、也可以写表达式，也可以写变量    -->
    <h2>{{firstName+lastName}}</h2>
    <h2>{{firstName+ '  ' +lastName}}</h2>
    <h3>{{counter *4}}</h3>
  </div>
<script>
  const app = new Vue ({
    el : '#app',
    data: {
      message: '你好Vue',
      firstName: 'kebe',
      lastName: 'bryant',
      counter : 100
    }
  })
</script>

</body>
</html>

2：v-once指令 :只允许页面第一次渲染对值进行修改，后续不允许修改。

  <div id="app">
    {{message}}
    <h2 v-once>{{message}} </h2> <!--只渲染一次，数据只在加载的时候修改第一次-->
  </div>
  <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: '你好Vue',
        }
      })
  </script>

3：v-html：当后台传来一个字符串“<a href="xxx">xxxx</a>”前台需要直接将这个进行展示

   <div id="app">
       {{message}}
       <p v-html="url"></p>
     </div>
     <script src="../js/vue.js"></script>
       <script>
         const app = new Vue ({
           el : '#app',
           data: {
             message: '你好Vue',
             url : '<a href="www.baidu.com">百度一下</a>'
           }
         })
     </script>

4：v-text指令：与Moustache语法不同的是：v-text是覆盖原有的内容，进行新增

  <div id="app">
    <p>{{message}}</p>
    <p v-text="message"></p> <!--会覆盖p标签内的所有内容-->
    <p v-pre>{{message}}</p> <!--会把标签内的内容原封不动的显示出来-->
  </div>
    <script src="../js/vue.js"></script>
      <script>
        const app = new Vue ({
          el : '#app',
          data: {
            message: '你好Vue',
          }
        })
    </script>

5：v-cloak：页面进行js卡住没有进行vue解析时会显示{{xxx}}这样难看的标志。

<div id="app" v-cloak>
      {{message}}
    </div>
    <script src="../js/vue.js"></script>
      <script>
        /*
        * 在vue解析之前，div有一个叫v-cloak的属性
        * 在vue解析之后，div没有一个叫v-cloak的属性
        * */
        /*代码从上到下执行，有些时候js代码会卡住，页面首先展示的是{{message}}，然后才进行渲染*/
        setTimeout(function () {
          const app = new Vue ({
            el : '#app',
            data: {
              message: '你好Vue',
            }
          })
        },1000)
    </script>

2：v-bind初体验

Moustache是对元素内的值进行改变渲染，v-bind是对元素属性进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
    之前学的是讲内容进行绑定显示，但是有一些情况需要绑定一些元素的属性，比如说 src的url是动态获取的这时候就需要使用v-bind属性
    mustache语法只能在content中进行使用
    错误做法 <img src="{{url}}"></img>  这里不可以使用   效果为<img src="{{url}}"></img>  无法解析
    正确做法：
-->
   <div id="app">
     <img v-bind:src="url" />
     <a v-bind:href="baiduUrl">百度一下</a>
     <!-- vue 给我们提供了简易语法糖写法-->
     <img :src="url"/>
     <a :href="baiduUrl">百度一下</a>
    </div>
     <script src="../js/vue.js"></script>


       <script>
         const app = new Vue ({
           el : '#app',
           data: {
             message: '你好Vue',
             url : 'https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png',
             baiduUrl : 'http://www.baidu.com'
           }
         })
     </script>
</body>
</html>

2：v-bind动态绑定class 对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <p class="active">{{message}}</p>
    <p :class="active">{{message}}</p>

    <!--<p :class="{类目1 ：布尔值，类目2 ：布尔值}">v-bindClass测试</p>-->
    <p :class="{active: isActive,line : isLine}">v-bind测试</p>
  </div>
  <div id="app2">
    <!--需求：点击按钮第一下变成红色、再点变成黑色-->
    <p :class="{active:isActive}">{{message}}</p>
    <button v-on:click="changeButton">点击变色</button>
  </div>
    <script src="../js/vue.js"></script>
      <script>
        const app = new Vue ({
          el : '#app',
          data: {
            message: '你好Vue',
            active: 'active',
            isActive: true,
            isLine: true
          }
        })

        const app2 = new Vue({
          el: '#app2',
          data: {
            message: '改变颜色点击按钮',
            active: 'active',
            isActive: true
          },
          methods:{
            changeButton :function(){
              this.isActive=!this.isActive
            }
          }
        })
    </script>
</body>
</html>

帅气的刘某人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（第三天）Vue插值操作，v-bind语法

1：插值操作 Moustache语法：{{message}}不仅仅可以定义变量、常量还能进行数值运算、字符串拼接等操作。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/vue.js"></.
复制链接

扫一扫