vue--模板语法--插值、指令、条件渲染、列表渲染、class绑定、style绑定

最新推荐文章于 2022-07-30 12:33:33 发布

米卡小米

最新推荐文章于 2022-07-30 12:33:33 发布

阅读量253

点赞数

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cmy741741/article/details/121393707

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.插值

文本      <span>Message: {{ msg }}</span>
原始html    <span v-html="rawHtml"></span>
属性    <div v-bind:id="dynamicId"></div>
事件    <a v-on:click="doSomething">...</a>
Javascript表达式    <div>{{ number + 1 }}</div>

2.条件渲染

v-if

当exp返回true的时候h1的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用

<h1 v-if="exp">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>

v-show

v-show 只是简单地切换元素的CSS property display。如果需要非常频繁地切换，使用v-show比较好

<h1 v-show="ok">Hello!</h1>
不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

区别：
        v-if v-else 通过控制dom节点的渲染，实现显示与隐藏
        v-show      通过控制dom节点css样式中display，来实现显示与隐藏
        频繁的显示与隐藏某个组件时，用v-show较好
          v-if会频繁渲染dom数，占用资源，影响代码运行效率

列表渲染 v-for

        用于将列表数据进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul>
   <li v-for="item in items" :key="item.message"> {{ item.message }} </li>
</ul>
当items为数组的时候，item为数组元素
<ul>
   <li v-for=“(item,index) in items" :key="item.message"> {{ item.message }} </li>
</ul>
index表示索引
<ul>
   <li v-for= "(value,key,index) in obj" :key="value"> {{ value}} </li>
</ul>
当obj为对象的时候，value为属性值，key为属性名,index为索引，

class绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div v-bind:class="{ active: isActive }"></div>当isActive 为true，该div具有active这个class
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

属性绑定

        v-bind 指令可以用于响应式地更新 HTML attribute，v-bind指令名称之后以冒号表示要接受的参数。
<a v-bind:href="url"></a>
        url为变量，表示将url变量的值动态赋值给a标签的href属性，注意，这里url在vue中是什么类型就传递给href属性什么类型。
<a :href="url"></a>
        由于属性绑定在vue中使用概率较大，所以这里提供了简写形式

style绑定

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }

<div v-bind:style="[baseStyles, overridingStyles]"></div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再见Vue</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    {{msg}}
    <button v-on:click="clickHandler">修改数据</button>
    <p v-bind:title="title">v-bind指令</p>
    <div class="content" v-html="content">
    </div>
    <input type="text" v-on:input="inputHandler">
    <input type="text" @input="inputHandler">
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        title: '我是P标签',
        content: '<h3>我是3级标题</h3>'
      },
      methods: {
        clickHandler() {
          this.msg = '你好 vue'
        },
        inputHandler(event) {
          console.log(event.target.value);
        }
      }
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再见Vue</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-if="isLogin">{{welcome}}</div>
    <div v-else>{{msg}}</div>
    <!-- <div v-show="isLogin">{{welcome}}</div>
    <div v-show="true">{{msg}}</div> -->
    <button v-if="isLogin" @click="isLogin = false">退出</button>
    <button v-else @click="loginHandler">登录</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '请登录',
        isLogin: false,
        welcome: '欢迎使用'
      },
      methods: {
        loginHandler() {
          this.isLogin = true
        }
      }
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再见Vue</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) of arr" :key="index">{{item}}{{index}}</li>
    </ul>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        arr: ['张三', '李四', '王五', '路人甲', '路人乙']
      },
      methods: {
        clickHandler() {
          this.msg = '你好 vue'
        }
      }
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再见Vue</title>
  <script src="../js/vue.js"></script>
  <style>
    .active {
      background-color: orange;
      font-size: 24px;
      border: 1px solid #ccc;
    }

    .box {
      background-color: paleturquoise;
      color: palevioletred;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div :class="{ active: isActive }">块级元素</div>
    <div :class="[active1, box1]">块级元素</div>
    <div :class="[isActive? active1 : box1]">块级元素</div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        active1: 'active',
        box1: 'box'
      },
      methods: {

      }
    })
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>再见Vue</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div :style="{color: 'red', fontSize: '24px'}">块级元素</div>
    <div :style="style1">块级元素</div>
    <div :style="[style1, style2]">块级元素</div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        style1: {
          color: 'orange',
          backgroundColor: 'pink',
          fontSize: '24px',
          'text-align': 'center'
        },
        style2: {
          color: 'green',
          boder: '1px solid #666',
          textAlign: 'right',
          marginTop: '10px'
        }
      },
      methods: {
        clickHandler() {

        }
      }
    })
  </script>
</body>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮切换</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <button :style="isAcive=='按钮1' ? acStyle : ''" @click="clickHandler">按钮1</button>
    <button :style="isAcive=='按钮2' ? acStyle : ''" @click="clickHandler">按钮2</button>
    <button :style="isAcive=='按钮3' ? acStyle : ''" @click="clickHandler">按钮3</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        isAcive: '',
        acStyle: {
          background: 'black',
          color: 'white'
        }
      },
      methods: {
        clickHandler(event) {
          this.isAcive = event.target.innerText
        }
      }
    })
  </script>
</body>
</html>