码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-2-本地应用

时间:2021-03-31 12:05:43      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:应用   -o   col   javascrip   alt   info   另一个   text   技术   

(1)v-text

往网页中写内容。

  • v-text指令的作用是:设置标签的内容(textContent)。
  • 设置 v-text 后,标签外面写文字无法显示。
  • 默认写法会替换全部内容,使用差值表达式 {{}} 可以替换指定内容。
  • 内部支持写表达式。
<div id="app">
    <h2> {{message}} 南宁 </h2>
    <h2 v-text="message"> 南宁 </h2>
    <h2> {{info+"="}} </h2>
    <h2 v-text="info+‘=‘"></h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"你好,小黑",
            info:"这是另一个字符串"
        }
    })
</script>

技术图片

(2)v-html

往网页中写内容、标签。

  • v-html 指令的作用是:设置元素的 innerHTML。
  • 内容中有 html 结构会被解析为标签。
  • v-text 指令无论内容是什么只会解析为文本。
  • 解析文本使用 v-text,需要解析 html 结构使用 v-html。
<div id="app">
    <p v-html="content"> </p>
    <p v-text="content"> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            content:"<a href=‘www.baidu.com‘>百度一下</a>"
        }
    })
</script>

技术图片

 

 (3)v-on

为元素绑定事件,可以用v-on:,也可以用@。

  • v-on 指令的作用是:为元素绑定事件。
  • 事件名不需要写 on。
  • 绑定的方法定义在 methods 属性中。

Vue-2-本地应用

标签:应用   -o   col   javascrip   alt   info   另一个   text   技术   

原文地址:https://www.cnblogs.com/wzr323/p/14597273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!