标签:python djang ref ever 一个 image 分享图片 bubuko img
第一个vue实例:
使用VUE和jquery和js一样,都需要先导入VUE你可以去cnd上导入也可以下载到本地
<body>
<div id="app">
<p>name:{{ name }}</p>
<p>age:{{ age }}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var app = new Vue({ //设置一个Vue的对象然后来进行操作
el:‘#app‘, // 对标签id为app的进行操作
data:{
name:‘老王‘,
age:17
}
})
</script>
</body>
还可以这样写:
把你要渲染的信息进行设置为一个字典
<script>
var d = {
name:‘老赵‘,
age:18
}
var app = new Vue({
el:‘#app‘,
data:d,
})
</script>
其实vue就相当于python的django的渲染进行设置渲染
添加标签和内容:
<body>
<!---->
<div id="app">
<p v-html="message"></p> <!--这个是吧你的标签页渲染到这里是添加标签和内容-->
<p>
{{kong.split(‘‘).reverse().join(‘‘)}} <!--这个就好比你的python的字符串的 方法 先去空 然后翻转 然后再拼接-->
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:‘#app‘,
data:{
message:‘<a href="https://www.baidu.com">点我</a>‘,
kong:‘坚强 坚强‘
}
})
</script>
对你的字体设置为翻转的 这个就好比python的字符串的操作先去空 然后 翻转然后拼接
<body>
<div id="app">
<p >{{ message.split(‘‘).reverse().join(‘‘) }}</p> <!--对你的 内容进行翻转-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:‘#app‘,
data:{
message:‘好看不 马上我到了页面上就是翻转了‘
}
})
</script>
效果显示:

结果就是翻转了
v-if 和v-show:
都是判断你的 内容是不是正确之后显示的 if是显示 show是隐藏
if的表达式当你的判断不成立就把信息给去除 而show是不正确的时候就隐藏
<body>
<div id="app">
<p v-if="ok">想要</p> <!--当ok是正确的时候就显示出来-->
<p v-show="ok">它想要</p> <!--当ok是正确的时候就隐藏-->
</div>
<!---->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:‘#app‘,
data:{
ok:true
}
})
</script>
</body>
效果:show是隐藏 if是去除:

标签:python djang ref ever 一个 image 分享图片 bubuko img
原文地址:https://www.cnblogs.com/zhaoyunlong/p/9361589.html