(十二)指令_内置指令

最新推荐文章于 2024-04-10 23:30:44 发布

吱吱不倦小子

最新推荐文章于 2024-04-10 23:30:44 发布

阅读量473

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/u013109501/article/details/114380258

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }  /*属性选择器*/

2.常用内置指令使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_指令_内置指令</title>
  <style>
    /*属性选择器*/
    [v-cloak] { display: none }
  </style>
</head>
<body>

<div id="example">
  <p v-cloak>{{content}}</p>
  <p v-text="content"></p>   <!--p.textContent = content-->
  <p v-html="content"></p>  <!--p.innerHTML = content-->
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {
      hint () {
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
</script>
</body>
</html>

吱吱不倦小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
(十二)指令_内置指令

1.常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标
复制链接

扫一扫