vue常用标签简单运用

v-cloak:防止页面加载时，出现vue.js的变量名用法：<div v-cloak>{{ message }}</div>CSS[v-cloak] {display: none!important;}！important:能够覆盖样式原本的权重，增加指定的样式的权重v-bind:属性=”js语句...

xclhs

8214人浏览 · 2019-03-08 21:30:47

xclhs · 2019-03-08 21:30:47 发布

v-cloak:防止页面加载时，出现vue.js的变量名

用法：

<div v-cloak>

  {{ message }}

</div>

CSS

[v-cloak] {
display: none!important;
}

！important:能够覆盖样式原本的权重，增加指定的样式的权重

v-bind:属性=”js语句”，将元素节点属性的特性和变量名保持一致

1、v-bind可以简写为一个‘’：”

如：

代码：

<body>
<div id="app">
    <h2 :title="msg"></h2>
    <p >{{msg}}</p>

</div>
<script>
   var vm =  new Vue({
       el: '#app',
       data:{
           msg:'养老院智能服务系统'
       }
   })
</script>
</body>

运行结果：

v-text=””可以与{{}}替换使用

1、v-text没有vue因网速过慢导致加载的问题

2、{{}}前后可以加值，而v-text会覆盖元素中原来的内容

3、{{}}和v-text不能识别html语言,需要使用html

代码：

<body>
<div id="app">
    <h2 v-text="msg"></h2>
    <p >{{msg}}</p>

</div>
<script>
   var vm =  new Vue({
       el: '#app',
       data:{
           msg:'养老院智能服务系统'
       }
   })
</script>
</body>

运行结果：

v-html指令添加html元素

代码：

<body>
<div id="app">
    <h2 v-html="msg"></h2>
    <p >{{msg}}</p>

</div>
<script>
   var vm =  new Vue({
       el: '#app',
       data:{
           msg:'<h2 style="color: maroon">养老院智能服务系统</h2>'
       }
   })
</script>
</body>

运行结果：

v-on:绑定事件

常用事件：click/mouseover/mouseup/

代码：

<body>
<div id="app">
    <h2 v-html="msg"></h2>
    <input type="button" value="点击报名" id="submit" v-on:click="result">

</div>
<script>
   var vm =  new Vue({
       el: '#app',
       data:{
           msg:'<h2 style="color: maroon">养老院智能服务系统</h2>'
       },
       methods:{
           result:function(){
               alert('报名成功')
           }
       }

   })
</script>
</body>

运行结果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^