v-html & v-text普通命令

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div id="box" v-text="msg" >

</div>


<div id="box" v-html="html"> <!-- 这个是用来显示带html标签的内容的 -->

</div>

<!-- <div id="box">
<button v-on:click="change">{{msg}}</button> //事件绑定肯定要输入事件参数。
</div> -->
<!-- <div id="box">
<a v-bind:href="url">这里是a链接</a> //用来绑定html已有的属性,比如 class, style, src,href等等
<img v-bind:src="src">
</div> -->
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'值前前',
html:"html",
url:"http://www.baidu.com",
src:"http://img5.imgtn.bdimg.com/it/u=2973638769,3401137854&fm=27&gp=0.jpg"
},
methods:{
change:function(){
this.msg="值后后"
}
}
})
</script>
</html>

 

//二次视频

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html实例</title>
    <script type="text/javascript" src="js/vue.js"></script>

</head>
<body>
    <div id="app">
        <span>{{message}}</span><br>  <!--第一种获得数据方式。有一个弊端,在浏览器解析代码还没解析道  下面new Vue  对象时,网速慢的情况下  用户会看到 {{message}}的情况 -->
        <span v-text="message"></span><br><!--第二种获得数据方式,实际开发时这种方法用的较多-->
        <span>{{dodo}}</span><br>  <!--这样写 标签会直接显示出来-->
        <span v-html="dodo"></span>   <!--有标签的数据可以这样写。但是不建议这么写,黑客会攻击,尤其在表单处。-->


    </div>
</body>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                message:'你好,caicai',
                dodo:"<h2>hello,蔡蔡</h2>",
            }
        })
    </script>
</html>

 

posted @ 2017-09-12 23:09  Jinsuo  阅读(262)  评论(0编辑  收藏  举报