Vue插值的操作和动态绑定属性v-bind

最新推荐文章于 2024-05-10 18:15:56 发布

ルビ氷

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量491

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/LvBing23/article/details/106872053

版权

本文详细介绍了Vue模板语法中的插值操作，包括Mustache、v-cloak、v-html、v-once、v-pre和v-text。重点讲解了v-bind的用法，如对象语法绑定类和样式，以及动态绑定class和style的数组语法。最后，通过一个v-for和v-bind结合的小案例，展示了如何实现点击列表项使其变红。

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

模板语法

1.插值的操作

1.Mustache

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{
  {message}}</h2>
    <!-- Mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
    <h2>{
  {fistName + ' ' + lastName}}</h2>
    <h2>{
  {fistName}} {
  {lastName}}</h2>
    <h2>{
  {counter * 2}}</h2>
    <!-- 显示counter的两倍 -->
    
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
      el: '#app',
      data: {
    
        message: '你好啊',
        fistName: 'bob',
        lastName: 'ababababa',
        counter: 100
      }
    })
  </script>
</body>
</html>

2.v-cloak

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak]{
    
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2 v-cloak>{
  {message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 在vue解析之前，div中有一个属性v-cloak
    // 在vue解析之后，div中没有一个属性v-cloak
   setTimeout(function(){
    
    const app = new Vue({
    
      el: '#app',
      data: {
    
        message: '你好啊'
      }
    })
   } , 1000)
  </script>
</body>
</html>

3.v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{
  {URL}}</h2>
    <h2 v-html="URL"></h2>
    <!-- 该指令后面往往会跟上一个string类型 -->
    <!-- 会将string的html解析出来并进行渲染 -->
  </

最低0.47元/天解锁文章

ルビ氷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插值的操作和动态绑定属性v-bind

模板语法1.插值的操作1.Mustache<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
复制链接

扫一扫