Vue.js——插值表达式

最新推荐文章于 2024-05-08 23:35:06 发布
最新推荐文章于 2024-05-08 23:35:06 发布
阅读量829 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MirabelleZWH/article/details/87511335
版权

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值，Mustache标签将会被替代为对应数据对象上属性的值，无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
但是，每个绑定都只能包含单个表达式，
在这里插入图片描述

Vue指令之v-cloak

使用 v-cloak 能够解决 插值表达式闪烁的问题

    <style>
        [v-cloak] {
            display: none;
          }
    </style>
    
<body>
    <div id="app">
    	<p v-cloak>++++++++ {{ msg }} ----------</p>  
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123'
          }
        })
      </script>
      
</body>

Vue指令之v-text和v-html

默认 v-text 是没有闪烁问题的
v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空

<div id="app">
    <h4 v-text="msg">==================</h4>
</div>

<div id="app">
	<div v-html="msg2">1212112</div>
</div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
          }
        })
      </script>

Vue指令之v-bind(:)的三种用法

  1. 直接使用指令v-bind

  2. 使用简化指令:

  3. 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

v-bind: 是 Vue中，提供的用于绑定属性的指令

<div id="app">
	<input type="button" value="按钮" v-bind:title="mytitle + '123'">
	    <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
	    <!-- v-bind 中，可以写合法的JS表达式 -->
	    <!-- <input type="button" value="按钮" :title="mytitle + '123'" > -->
</div>

<script>
        var vm = new Vue({
          el: '#app',
          data: {
            mytitle: '这是一个自己定义的title'
          }
        })
</script>

Vue指令之v-on(@)

之前简单书写

<div id="app">
	<input type="button" value="按钮" :title="mytitle + '123'" id="btn">
</div>
<script>
	document.getElementById('btn').onclick = function(){
          alert('Hello')
        } 
</script>

Vue 中提供了 v-on: 事件绑定机制

<div id="app">
	<input type="button" value="按钮" v-on:click="show">
	 <!-- <input type="button" value="按钮" @click="show"> -->
</div>
<script>
    var vm = new Vue({
	methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
	})
</script>

Vue指令之v-model和双向数据绑定

<body>
  <div id="app">
    <h4>{{ msg }}</h4>

    <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  -->
    <!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->

    <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
    <!-- 注意： v-model 只能运用在 表单元素中 -->
    <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
    
    <input type="text" style="width:100%;" v-model="msg">
    
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
      },
      methods: {
      }
    });
  </script>
</body>

简易计算器案例

  1. HTML 代码结构

  <div id="app">

    <input type="text" v-model="n1"> 

    <select v-model="opt">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">÷</option>
    </select>

    <input type="text" v-model="n2">
    <input type="button" value="=" v-on:click="getResult">
    <input type="text" v-model="result">

  </div>
  1. Vue实例代码：

	// 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },

      methods: {
        getResult() {// 计算器算数的方法  

          switch (this.opt) {
            case '0':
              this.result = parseInt(this.n1) + parseInt(this.n2);
              break;
            case '1':
              this.result = parseInt(this.n1) - parseInt(this.n2);
              break;
            case '2':
              this.result = parseInt(this.n1) * parseInt(this.n2);
              break;
            case '3':
              this.result = parseInt(this.n1) / parseInt(this.n2);
              break;
          }
			// 注意：这是投机取巧的方式，正式开发中，尽量少用
          //var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          //this.result = eval(codeStr)
          
        }
      }
      
    });

Vue指令之v-for和key属性

  1. 迭代数组
<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
  1. 迭代对象中的属性

	<!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  1. 迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

【小栗子】

  • v-for 循环的时候，key 属性只能使用 number获取string
  • key 在使用的时候，必须使用 v-bind属性绑定的形式，指定 key 的值
  • 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>
    
     <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>

Vue指令之v-if和v-show

  • v-if 的特点：每次都会重新删除或创建元素
  • v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
  • v-if 有较高的切换性能消耗
  • v-show 有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

【小栗子】

  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
  </div>
  

 <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>
六道轮回 -- 鼬
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bar图设置距离 python_Python可视化 | 反距离加权法插值及可视化绘制
weixin_39715926的博客
12-18 564
本期推文，我们将介绍IDW(反距离加权法(Inverse Distance Weighted))插值的Python计算方法及插值结果的可视化绘制过程。主要涉及的知识点如下：IDW简介自定义Python代码计算空间IDW分别使用plotnine、Basemap进行IDW插值结果可视化绘制IDW简介反距离权重 (IDW)插值假设：彼此距离较近的事物要比彼此距离较远的事物更相似。当为任何未测量的位置预...
vue-notes-example：Vue.js范例项目
02-14
【Vue.js范例项目——深度探索前端开发框架】 Vue.js是一款轻量级的前端JavaScript框架，以其易学易用、高性能和灵活性而受到广大开发者喜爱。"vue-notes-example"项目是一个基于Vue.js的示例应用，它展示了Vue的...
JSX基础语法（一）——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号
weixin_44867717的博客
12-29 1422
JSX基础语法——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号 JSX是什么 // What is this? This is JSX（js的语法扩展：在js中写HTML标签） let info = <div>Hello World!</div>; JSX元素中动态插入数据 let name = 'World' const
【Vue】简单表达式
luobifeiyeshi0的博客
05-06 238
插值表达式{{}}，可以在前后插入一些内容，插值表达式可以进行一些简单的字符串。不同点：v-text 不会解析富文本；v-html 可以解析富文本。4.key在使用v-for的时候都需要去设置key。v-model 数据双向绑定，绑定的是表单控件。v-bind 元素的属性绑定，简写 “ ：”key只能是字符串或数字，key必须是唯一的。v-show设置display:none。v-on 事件的绑定，简写“ @ ”频繁切换的时候可以使用v-show。只修改一次的时候可以使用v-if。
Vue插值表达式
最新发布
weixin_44201223的博客
05-08 155
Vue插值表达式
vue中使用常用正则表达式
12-09 3869
3~20个字符，可使用字母、数字、下划线，需以字母开头：/^[a-zA-Z]\w{2,19}$/
Vue初体验（三），表达式的使用
热门推荐
mapbar_front的博客
05-14 1万+
1、表达式是使用{{}}双重大括号绑定起来的js代码块，和angular不同的是，在vue中，提供了完全的JavaScript表达式支持。 使用方式：在data中申明变量，在{{}}中进行js操纵。 最简单的表达式就是文本。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</t
Vue.js前端开发实战-源代码.zip
07-07
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，...
网页模板——vue.js添加待办事项样式特效源码.zip
11-23
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，尤其适合单页面应用程序（SPA）。在"网页模板——vue.js添加待办事项样式特效源码.zip"这个压缩包中，包含了一个利用Vue.js实现的待办事项（To-Do ...
vue 3.0学习笔记(从入门到精通)
10-07
这与`{{ }}`插值表达式不同，后者会把内容当作纯文本处理。例如： ```html <p v-html="msg"></p> ``` 这里`msg`包含HTML标签时，会被解析成实际的HTML。 `v-bind`指令用于动态地绑定元素的属性，可以使用语法糖`:...
ppt课件-第2章 Vue数据绑定 .zip
03-22
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易用性和灵活性著称，尤其在构建用户界面时表现优秀。本课件“第2章 Vue数据绑定”将深入讲解Vue的核心特性之一——数据绑定，它是Vue实现声明式编程的关键。 ...
vue中的插值表达式
aishui9393的博客
07-10 306
前言：在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理 用法： 使用在vue实例对象对应的DOM元素的html的正反标签之间 支持匿名变量 支持三目运算符 数值 支持四则运算 支持比较运算符 支持数值类型的一些内置方法 ...
js插值法的使用_vue.js实现插入数值与表达式的方法分析
weixin_39640090的博客
12-20 708
本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考，具体如下：vue.js在插入数值的时候有三种方式1、插入纯文本插入纯文本是最简单的方式，使用双大括号就能插入想要的值。{{ msg }}mustache也可以在属性中使用就能显示所需要显示的文本信息了。但是有时候，我们想要插入的html文本，这时候要怎么办呢？在插入html的时候有两种方式，一种是用三个大括号的形式，这种是...
vue表达式
DVchengxuyuan的博客
12-28 1085
插值表达式： 语法：{{数据/表达式}} 功能：向页面渲染数据或表达式的结果。 插值表达式会自动将vue实例中的data属性中的数据取出，渲染到页面上。 算术运算： + - * / % 调用方法 Math.floor Date.now() 三元表达式 注意:[千万不要写 js语句。] 比如： var a = 10+20; if else 语句等。 <div id="app"> <!-- ...
Vue的差值表达式
king636的博客
09-07 2328
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript" src="js/
Vue.js--插值与表达式
吴声子夜歌的博客
10-08 1450
使用双大括号(Mustache语法) "{{}}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如： <div id="myApp">{{str}}</div> <script> var app = new Vue({ el: '#myApp', data: { str: '测...
002 jsx使用方式-插值表达式
test253506088的博客
06-15 248
Jsx的基本语法：
vue笔记---模板语法-插值
qq_34530330的博客
03-06 1940
1.文本 数据绑定最常见的形式就是使用‘Mustache’语法（双打括号）的文本插值： message:{{msg}} 使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。 但请留心这回影响到该节点上所有的数据绑定： this will nver change:{{message}} 2.纯html 双打括号会将数据解释为纯文本，而非html。为了输出ht
Vue:使用JavaScript 表达式
weixin_30443813的博客
04-26 392
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div&gt...
请写一段HTML，引用VUE.JS 演示插值的用法
04-28
当然可以，以下是一段使用VUE.JS的HTML代码，演示了插值的用法： ```html <!DOCTYPE html> <html> <head> <title>Vue.js Interpolation Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>Welcome {{ name }}!</p> <p>Your age is {{ age }}.</p> <p>You have {{ numberOfMessages }} unread messages.</p> </div> <script> var app = new Vue({ el: '#app', data: { name: 'John', age: 30, numberOfMessages: 5 } }); </script> </body> </html> ``` 在这个例子中，我们使用了插值语法，将Vue.js实例的data属性中的值插入到HTML文本中，从而实现了动态展示数据的效果。其中{{ name }}代表了Vue.js实例的data属性中的name属性的值，{{ age }}代表了Vue.js实例的data属性中的age属性的值，{{ numberOfMessages }}代表了Vue.js实例的data属性中的numberOfMessages属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值