Vue-基础操作

最新推荐文章于 2022-10-23 18:44:27 发布

理头崴特

最新推荐文章于 2022-10-23 18:44:27 发布

阅读量124

点赞数

分类专栏： vue 文章标签： vue.js html5 html

本文链接：https://blog.csdn.net/m0_60698858/article/details/119411026

版权

一、插值操作

即将data中设置好的message的值插入到{ {message}}中

各种属性：

v-once

<span>{
  {number}}</span>
<span v-once>{
  {number}}</span>

上面的number会随data中的变化而变化，而下面由于存在v-once属性，第一次赋值后number的值将不再随daat改变。

v-html

将data中的html语言识别转换

<span>{
  {url}}</span>
<span v-html="url"></span>

data: {
  number: 10,
  url: '<a href="http://www.baidu.com">百度一下</a>'
}

v-text

<h2>{
  {number}}</h2>  =  <h2 v-text="number"></h2>

v-pre

将标签中的内容原封不动地显示出来，不根据data做任何解析

v-cloak

在vue解析之前标签有v-cloak属性，解析后属性自动消失

应用：在css中根据属性设置样式，实现对解析前后样式的控制（例如解析前display:none，解析完成前不显示）

二、绑定属性

绑定class

<img v-bind:src="img_url">
<a v-bind:href="a_url">百度一下</a>

data: {
  img_url: 'C:\\Users\\zsy\\Desktop\\1.jpg',
  a_url: 'http://www.baidu.com'
}

使用“v-bind”将引号内的值解析好后赋值给标签（可省略v-bind：

v-bind:src = :src

）

通过bind绑定class实现对标签css格式的动态转换（固定的直接class，需要更改的带bind）

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

  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 v-bind:class="{active:isActive, line: isLine}">{
  {message}}</h2>
  <button v-on:click="btnchange">反转</button>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
  const app = new Vue({
      el: "#app",
      data: {
        message: 'test',
        isActive: true,
        isLine: true
      },
      methods: {
        btnchange: function () {
          this.isActive = !this.isActive
        }
      }
    })
  </script>
</body>
</html>

如

最低0.47元/天解锁文章

理头崴特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-基础操作

操作1、插值操作即将data中设置好的message的值插入到{{message}}中各种属性： v-once {{number}}{{number}}上面的number会随data中的变化而变化，而下面由于存在v-once属性，第一次赋值后number的值将不再随daat改变。v-html将data中的html语言识别转换..
复制链接

扫一扫

专栏目录