Vue模板语法

最新推荐文章于 2022-05-02 23:22:49 发布
最新推荐文章于 2022-05-02 23:22:49 发布
阅读量93 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60385807/article/details/121021816
版权

一、插值

1 、文本 { {msg}}

2 、html 使用v-html指令用于输出html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>文本</p>

//红色html 使用v-html指令用于输出html代码，黑色 文本 { {msg}}
            <h3>{ {msg}}</h3>
            <p>html串</p>
            <div v-html="htmlstr"></div>
        </div>
        <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:'vue Hello!!!',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>'
                    };
            }
        })
        </script>
    </body>
</html>

 

3 、属性 HTML属性中的值应使用v-bind指令

跳转百度界面案例

所有原生态的属性，要利用vue的变量，都需要在对应的属性钱加v-bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>文本</p>
            <h3>{ {msg}}</h3>
            <p>html串</p>
            <div v-html="htmlstr"></div>
            <p>Vue中的属性</p>
            <!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性钱加v-bind -->
            <a v-bind:href="hrefstr">百度</a>

           //缩写方式
            <input :value="valuestr" />
        </div>
        <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:'vue Hello!!!',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
                    hrefstr:'http://www.baidu.com',
                

最低0.47元/天 解锁文章
在敲！！！别催
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的模板语法
weixin_45111741的博客
09-17 157
（） 1.插值 1.1 文本 {{msg}} 1.2 获取 HTML片段 使用v-html指令用于输出html代码 1.3 给属性绑值 HTML属性中的值应使用v-bind指令 1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} 我的I...
Vue——模板语法
hulin的博客
03-30 1162
Vue的模板语法
Vue单元测试case写法
hsany330的专栏
06-23 3898
书接上文，karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine，语法参考。 代码地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点 对于vue组件，单元测试测试主要
Vue框架---Vue模板语法（二）
鑫709的博客
05-02 1458
样式绑定 1、class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 <div id="ad"> <h1>{{ts}}</h1> <!-- class样式 --> <div :class="clsArrs"> 11111111111111111111111111111 </div> </div> <script>
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Vue基础之Vue模板语法
tian361zyc的博客
05-25 1364
vue基础-vue模板语法
Vue中的模板语法
qq_45954420的博客
03-06 701
一、基础语法 1.{{XXX}} 中的内容要写js表达式 且xxx可以自动读取到data中的所有属性 2.一旦data中的数据发生改变 那么页面中用到该数据的地方会自动更新 注意区分 js表达式 和 js代码（语句） js表达式 ：一个表达式会产生一个值，可以放在任何一个需要值得地方 例如 a a+b demo(1) x === y ? 'a' : 'b' js代码（语句）: if(){} for(){} 二、模板语法 1.插值语法 功能：用于解析标签体内容 写法：{{xxx}},xxx
vue.js v-for 一定要与v-bind:key="id" 联用
weixin_30481087的博客
11-14 880
1. v-for: <div v-for="(item,index) in todolist" v-bind:key="item.id"> </div> 2. v-if..... v-else : <div v-if="flag" v-bind:key="item.id"> </div> <div v-else v-bind:key...
vue深入理解v-bind指令
热门推荐
博客
08-05 1万+
v-bind入门 &lt;span :text="content"&gt;使用&lt;/span&gt; 会渲染成如下： &lt;span text="content"&gt;使用&lt;/span&gt; 字符串拼接 &lt;span :text=' "we" + 1 '&gt;使用&lt;/span&gt; 会渲染成： &amp
vue模板语法整理（三）
青椒的博客
04-08 182
表单绑定v-model Vue中使用v-model指令来实现表单元素和数据的双向绑定。 基本使用方式 <div id="app"> <input type="text" v-model="message"> {{message}} </div> 当我们在输入框输入内容时 1).因为input中的v-model绑定了message，所以会实时将输入的...
Vue--基础模板语法以及计算属性
博客
11-17 1万+
属性和方法 每个Vue实例会代理其data对象里所有的对象 var app = new Vue({ data: { message : '' } })也就是说，可以直接通过:app.message = 'xxx'来改变data中出现的属性， 从而引发视图的变化。 2. 注意只有这些被代理的属性是响应的。 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
vue
羽下佳人的博客
04-10 1328
一. angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。 感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。 顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），reac...
vue学习笔记
rbuli的博客-又起秋风
06-22 593
资源来源：vue中文文档 本文绝大部分资料摘录自Vue官方文档，方便日后查阅。 Vue.js是什么   Vue是一套用于构建用户界面的 渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅仅易于上手，还便于与第三方库或既有项目整合。   Vue专注于渲染/更新非常简单的组件树的真实性能。组件的依赖是在渲染过程中自动追踪的。   Vue整体思...
Vue基础语法(二)
南下在线的博客
08-22 275
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象
给id属性用v-bind动态绑定对象和字符串
qq_23614619的博客
01-25 9562
class和id 动态的绑定一个字符串达到自定义名称的方法：:class="'字符串'+item.value"  :id="'字符串'+item.value"     分配            table{border:#ccc 0px solid; margin:0px auto;}  th{height:40px; line-height:40p
尚硅谷Vue学习——v-html指令
小缘同学的博客
03-17 614
1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： v-html会替换掉节点中所有的内容，{{xx}}则不会 v-html可以识别html结构 3.注意：v-html有安全性问题 在网站上动态渲染任意HTML非常危险，容易导致XSS攻击。 一定要在可信的内容上使用v-html，不要用在用户提交的内容上。 <!DOCTYPE html> <html lang="en"> <head> <met...
vue模板语法里读取数组的某一项
最新发布
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值